Material-ui: How to use withStyles on nested component

[melissachang]

There are several unanswered SO questions (eg here) on this, so I'm filing a github issue.

The withStyles documentation describes how to style the component that is being exported. Say Foo.js exports component Foo; that pages describes how to style Foo.

In my case, Foo.js exports Foo, and there is a nested Bar component inside Foo.js:

<Foo>
  <Bar />
</Foo>

I can't figure out how to use withStyles on Bar.

Specifically, I have Header.js that contains:

  <ToggleButtonGroup>
    <ToggleButton />
    <ToggleButton />
  </ToggleButtonGroup>

I can't figure out how to set root and selected styles on ToggleButton.

https://codesandbox.io/s/q3k3j2r6zq

Screenshot of codesandbox:

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[joshwooding]

Both are valid ways of styling. For method 1:

You need to use the &$ syntax to keep specificity (https://material-ui.com/customization/overrides/#internal-states)

const styles = {
  root: {
    color: "red",
    "&$selected": {
      color: "blue"
    }
  },
  selected: {}
};

Method two:

You need to pass through the props and use the CSS specificity fix above

const StyledToggleButton = withStyles(styles)(props => {
  const { classes, ...others } = props;
  return (
    <ToggleButton
      classes={{
        root: classes.root,
        selected: classes.selected
      }}
      {...others}
    >
      yoyo
    </ToggleButton>
  );
});

https://codesandbox.io/s/ox8r83j3oz

[melissachang]

Thank you!