Place styles generated by material-ui for children components after style generated for parent component?
Place styles generated by material-ui for children components after style generated for parent component?
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.
Layout
& > *
className
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.
withStyle
<head>
withStyles(classes, index: 1 )(ChildComponent)
What can I do to allow overriding parent defined style by children?
Also see this request.
@AdeelImran My final goal is for the children styles ('classes') to override styles applied by their parrent. This is not happening with material-ui because when you use
withStyles it assigns higher specificity (priority) to styles produced by parrent. Technically, it means that withStyles generates parrent's styles after children's styles inside html <head> tag. So, my goal is to override parrent's styles. One way to do it would be modify the way my JSS gets generated.– Rasto
Sep 17 '18 at 13:52
withStyles
withStyles
<head>
Is this what you are trying to do? codesandbox.io/s/10pmn4yzrj
– Luke Peavey
Sep 19 '18 at 0:38
@drasto Im afraid i don't have a good solution for this.
– Luke Peavey
Sep 20 '18 at 7:19
@drasto In my example, it works because
Layout uses props.children instead of directly including child components. But this only works if child components are imported after parent. So not really a solution– Luke Peavey
Sep 20 '18 at 7:21
Layout
1 Answer
1
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.
props.children
See JSS injection order
// 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.
Hmm, this is interesting. It is a working solution but I am not sure I want to depend on import order for styling of my app...
– Rasto
Oct 14 '18 at 2:34
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy
Can you please explain this question a bit more, I don't understand your intent? Do you want to update your generated JSS, or override some classes?
– Adeel Imran
Sep 17 '18 at 5:50