How to pass props to to material-ui styles in a sub-selector

Question

Usual apologies if this is asked and answered...

I've got a stylesheet:

const styles = createStyles({
    root: {background: 'blue', color: 'red'},
    highlightedWrapper: {
        '& $root': {
           background: 'green',
           color: 'black'
        }
    }
})

...which I invoke like this:

const useStyles = makeStyles(kanbanStyles);

...and then reference in my component like this:

const classes = useStyles()

So far, so good. What I'd like to be able to do is pass props into useStyles(), which I'd then reference in the stylesheet. So this works:

const classes = useStyles({color: 'yellow'})

const styles = createStyles({
    root: (props) => { return {background: 'blue', color: props.color}},
    highlightedWrapper: {
        '& $root': {
           background: 'green',
           color: 'black'
        }
    }
})

...but I cannot figure out how to invoke the function inside the sub-selector. Like, this doesn't work for me:

const styles = createStyles({
    root: {background: 'blue', color: props.color},
    highlightedWrapper: {
        '& $root': {
           background: 'green',
           color: (props) => props.color
        }
    }
})

I've tried various permutations of the above syntax, putting it right after hightlightedWrapper:, and right after '& $root':, but nothing has worked.

Help?

Thanks!!

Use the same syntax in `root` as what you have in `highlightedWrapper` (`color: (props) => props.color`) and it should be fine. — Ryan Cogswell, Oct 18 '19 at 22:19
A couple working examples: https://stackoverflow.com/questions/58397369/is-there-a-way-to-create-a-coloredcheckbox-component/58397932#58397932 and https://stackoverflow.com/questions/55008320/using-props-to-set-hover-background-color/55010155#55010155. — Ryan Cogswell, Oct 18 '19 at 22:23
@RyanCogswell unless I'm missing something (which could well be the case), I've already tried that syntax. See my example above. As I mention below, I'm using Typescript, which means I have to use `createStyles`, and I wonder if that's somehow throwing things off somehow? — hairbo, Oct 19 '19 at 15:05
Please provide a [code sandbox](https://codesandbox.io/s/new) reproducing your problem. — Ryan Cogswell, Oct 19 '19 at 15:15
Huh. This works. https://codesandbox.io/embed/react-typescript-ugqwp Color me befuddled. Obviously something else is afoot. — hairbo, Oct 19 '19 at 18:09
@RyanCogswell Wait! I take it back! My sandbox was wrong, and masked the issue. Here's an updated sandbox that shows the issue. I would expect "Name Two" to be red, and then fall back to blue, but it shows as green. https://codesandbox.io/s/modest-dan-1o387 — hairbo, Oct 21 '19 at 17:52
Works fine after fixing the rule syntax to `"& $name"` (https://codesandbox.io/s/jolly-kapitsa-2bl0k). Without the space you were matching elements that have both the `wrapper` and `name` classes rather than matching `name` descendants of `wrapper`. — Ryan Cogswell, Oct 21 '19 at 17:56
wait...wait... I just noticed this: ```name: {color: props => "green"}``` If I change that to `name: {color: "green"}`, then it breaks. So it looks like if you're going to use a function for CSS rule, that you have to use a function every other place you reference that rule, even if the other places don't have dynamic values? — hairbo, Oct 21 '19 at 18:35
That aspect is a known bug that is unlikely to be fixed: https://github.com/mui-org/material-ui/issues/13672#issuecomment-541118923 — Ryan Cogswell, Oct 21 '19 at 19:02

score 1 · Accepted Answer · answered Oct 21 '19 at 19:15

Props to @RyanCogswell for the answer, but the issue is that if you're going to use a function for a style, in order to handle dynamic props, you must use a function everywhere that style is referenced. So this will break:

  wrapper: {
    '& $name': {
      color: (props) => (props.color ? props.color : 'blue')
    }
  },
  name: {
    color: 'green'
  }

...but this will work:

  wrapper: {
    '& $name': {
      color: (props) => (props.color ? props.color : 'blue')
    }
  },
  name: {
    color: (props) => 'green'
  }

Notice the (props) => 'green'.

This is a bug that may not get resolved anytime soon: https://github.com/mui-org/material-ui/issues/13672#issuecomment-541118923

How to pass props to to material-ui styles in a sub-selector

1 Answers1