Here is a demonstration that showcases the use of nested StylesProvider elements. I suggest opting for the seed option over the productionPrefix option as it explicitly helps in avoiding clashes between class names. Unlike the productionPrefix option, the seed option works in both development and production modes.
Refer to https://material-ui.com/styles/api/#creategenerateclassname-options-class-name-generator:
options.seed (String [optional]): It defaults to ''. This string uniquely identifies the generator and helps prevent naming conflicts when multiple generators are used within the same document.
The nested StylesProvider does function correctly, with one caveat. The useStyles hook generated by makeStyles (if used with withStyles, the scenario still holds true as it internally calls makeStyles) caches the stylesheet created for a particular component. Therefore, if a component is utilized both inside and outside the nested StylesProvider (e.g., MainAndSub in this example), it will employ the initially generated stylesheet and won't create new classes using the nested class name generator. While this behavior is generally beneficial, it might lead to confusion during testing/validation if not understood correctly.
import React from "react";
import {
makeStyles,
StylesProvider,
createGenerateClassName
} from "@material-ui/core/styles";
const generateClassNameMain = createGenerateClassName({ seed: "main" });
const generateClassNameSub = createGenerateClassName({ seed: "sub" });
const useMainStyles = makeStyles({
mainTree: {
backgroundColor: "blue",
color: "white"
}
});
const useSubStyles = makeStyles({
subTree: {
backgroundColor: "green",
color: "white"
}
});
const useMainAndSubStyles = makeStyles({
mainAndSub: {
backgroundColor: "red",
color: "white"
}
});
const MainAndSub = () => {
const classes = useMainAndSubStyles();
return (
<div className={classes.mainAndSub}>
MainAndSub className: {classes.mainAndSub}
</div>
);
};
const MainTree = () => {
const classes = useMainStyles();
return (
<>
<div className={classes.mainTree}>
MainTree className: {classes.mainTree}
</div>
<MainAndSub />
<StylesProvider generateClassName={generateClassNameSub}>
<SubTree />
<MainAndSub />
</StylesProvider>
</>
);
};
const SubTree = () => {
const classes = useSubStyles();
return (
<div className={classes.subTree}>SubTree className: {classes.subTree}</div>
);
};
export default function App() {
return (
<div className="App">
<StylesProvider generateClassName={generateClassNameMain}>
<MainTree />
</StylesProvider>
</div>
);
}
https://codesandbox.io/s/nested-stylesprovider-9hn6s?fontsize=14&hidenavigation=1&theme=dark