CODEWITHSUNDEEP
javascriptcssreactjsmaterial-uijss
Rasto
Rasto

Reputation: 17844

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.

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.

Upvotes: 0

Views: 526

Answers (1)

Luke Peavey
Luke Peavey

Reputation: 3889

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.

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>
  );
}

Edit Stack Overflow: Override styles set in parent component Material UI

Caveats

Im not 100% sure that this behavior is guaranteed.

Upvotes: 1

Related Questions