When using makeStyles, how can I reference generated classnames when creating nested rules?
For instance, if I have a "container" class with nested "item" elements and I want to use the generated "item" class in the style definition. The approach that works for a custom non-generated class ("custom") does not seem to work for generated class names.
https://codesandbox.io/s/material-demo-311tn?file=/demo.js
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
container: {
"& > .custom": {
"&:first-child": {
backgroundColor: "grey"
}
},
// How do I make this work?
"& > .item": {
"&:first-child": {
color: "white"
}
}
},
item: {
padding: "20px"
}
});
export default function Hook() {
const classes = useStyles();
return (
<div className={classes.container}>
<div className={`${classes.item} custom`}>Hello</div>
<div className={`${classes.item} custom`}>World!</div>
</div>
);
}