Login/Register
How to specify the order in which the style sheets appear in the document?
Asked Answered
Solved material-ui
F

2

8

I have several styled components, using the withStyles HOC to export them, but i can't override some rules because jss mix the order of mui stylesheets with my component's stylesheets.

How can I push my styles to the end?

enter image description here

Forme answered 8/3, 2018 at 18:37 Comment(0)
H
19

Me and my team also stumbled upon this and we managed to find a solution. Apparently withStyles, takes an option object as parameter. So in order to solve this issue, you need to pass a parameter index with a value of 1. So what you get is this:

withStyles(styles, {index: 1})(yourComponent)
Hostel answered 27/6, 2018 at 18:0 Comment(1)
According to this (very strict) community rules, I can't say thanks. I can't upvote your answer either because I suck at stackoverflow and my reputation is too low. But your answer solved my problem. Sooo... thank you very much! – Forme
G
1

This is covered here in the documentation for the Material UI library.

CSS injection order
The CSS injected by Material-UI to style a component has the highest specificity possible as the <link> is injected at the bottom of the <head> to ensure the components always render correctly.

You might, however, also want to override these styles, for example with styled-components. If you are experiencing a CSS injection order issue, JSS provides a mechanism to handle this situation. By adjusting the placement of the insertionPoint within your HTML head you can control the order that the CSS rules are applied to your components.

Essentially, you create an injection point, and then have JSS use that for where it inserts the styles. The options in doing so include creating an HTML Comment, creating an HTML element, and using Javascript to create a comment in HTML (as create-react-app strips the comment in production)

Glaucous answered 9/3, 2018 at 23:20 Comment(1)
Thank you and Yes, I've tried that. You can see the <noscript id="jss-insertion-point"> tag just before the styles tags begin. But that just controls the insertion point of every stylesheet as a block. What I'm trying to achieve is to control the order of the stylesheets, so that my styles are at the end and correctly override mui styles – Forme

© 2022 - 2024 — McMap. All rights reserved.