问题
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?
回答1:
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)
回答2:
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
insertionPointwithin 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)
来源：https://stackoverflow.com/questions/49180192/how-to-specify-the-order-in-which-the-style-sheets-appear-in-the-document