Place styles generated by material-ui for children components after style generated for parent component?
Question
I am using material-ui which in turn uses JSS to style a website.
I have a component called Layout that sets margin of all its children (using all children selector & > * in its style). That works but I also want the children to be able to override that margin in their own styles named in className property.
This issue is caused by the fact that material-ui's withStyle function places the parent's style after children's styles inside html <head> . I could increase all chidren's style priority by doing something like withStyles(classes, { index: 1 })(ChildComponent) but that would be tedious and error prone.
What can I do to allow overriding parent defined style by children?
Also see this request .
1 answers
solution1
1 2018-09-21 21:59:56
This is more of a workaround than a solution...
Its possible to have the child component's styles injected below the parent's if you use props.children in the parent component.
// If child components are imported after Layout,
// their styles will be injected below Layout's styles.
import Layout from "./Layout";
import ChildOne from "./ItemOne";
import ChildTwo from "./ItemTwo";
function App() {
return (
<Layout>
<ChildOne />
<ChildTwo />
</Layout>
);
}
Caveats
Im not 100% sure that this behavior is guaranteed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.