How to create deterministic styles when using createStyles() - reactjs

Question

I have create a component that needs to have custom styles, so I used createStyles({}). This seems to have worked (almost) as I want it to. I have also used createGenerateClassName({}) to indicate I need deterministic style names. However, the two do not seem to be working together. While the standard MUI components no longer have the hash number as part of the class name, the custom styles do. What need to change to support deterministic styles for every class name?
Here is the code I have:
import {Component, ComponentMeta, ComponentProps, SizeObject} from '#xyz/abc' // real name removed here due to restrictions
import {Button, Paper} from '#material-ui/core'
import {createGenerateClassName, createStyles, MuiThemeProvider, Theme, withStyles} from '#material-ui/core/styles'
import JssProvider from 'react-jss/lib/JssProvider'
const theme = createMuiTheme({
palette: {
primary: {
main: 'blue',
},
secondary: {
main: 'green',
},
error: {
main: 'red',
},
},
typography: {
useNextVariants: true,
},
})
const styles = ({palette, spacing}: Theme) =>
createStyles({
button: {
backgroundColor: '#2196f3',
},
buttonDark: {
backgroundColor: '#880e4f',
},
buttonLight: {
backgroundColor: '#e1bee7',
},
})
const generateClassName = createGenerateClassName({
dangerouslyUseGlobalCSS: true,
})
class AnalysisSelector extends Component<ComponentProps, any> {
render() {
const {classes} = this.props
return (
<MuiThemeProvider theme={theme}>
<JssProvider generateClassName={generateClassName}>
<Paper {...this.props.emit()} className={'paperContainer'}>
<Button className={classes.button}>Primary Light</Button>
<Button className={classes.buttonLight}>Primary</Button>
<Button className={classes.buttonDark}>Primary Dark</Button>
</Paper>
</JssProvider>
</MuiThemeProvider>
)
}
}
export const MNOAnalysisSelector = withStyles(styles, {name: 'mnoButton'})(AnalysisSelector)
Finally here is the rendered HTML:
<button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-flat mnoButton-button-1" tabindex="0" type="button">
<span class="MuiButton-label">Primary Light</span>
<span class="MuiTouchRipple-root"></span>
</button>
<button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-flat mnoButton-buttonLight-3" tabindex="0" type="button">
<span class="MuiButton-label">Primary</span>
<span class="MuiTouchRipple-root"></span>
</button>
<button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-flat mnoButton-buttonDark-2" tabindex="0" type="button">
<span class="MuiButton-label">Primary Dark</span>
<span class="MuiTouchRipple-root"></span>
</button>
</div>
I am fine with the class names being mnoButton-button, mnoButton-buttonLight, and mnoButton-buttonDark, I just need the ending hash removed.
Thanks for any suggestions / assistance.

Answer 1

You can use global class names as documented in v4 here: https://next.material-ui.com/styles/advanced/#jss-plugin-global
jss-plugin-global is included in v3 as well, so the same approach will work with it.
The only way for the other syntax to create global names is if the name passed to withStyles starts with "Mui" (which I wouldn't recommend doing).
I've shown both approaches in the code below.
import React from "react";
import { withStyles } from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
const styles = theme => ({
"#global": {
".mnoButton-button": {
backgroundColor: "#2196f3"
},
".mnoButton-buttonDark": {
backgroundColor: "#880e4f"
},
".mnoButton-buttonLight": {
backgroundColor: "#e1bee7"
}
},
button: {
backgroundColor: "purple",
color: "white"
}
});
const MyButtons = ({ classes }) => {
return (
<>
<Button className="mnoButton-button">Hello World</Button>
<Button className="mnoButton-buttonDark">Hello World</Button>
<Button className="mnoButton-buttonLight">Hello World</Button>
<Button className={classes.button}>Hello World</Button>
</>
);
};
export default withStyles(styles, { name: "Mui-mnoButton" })(MyButtons);

Answer 2

Source: github
import { StylesProvider, createGenerateClassName } from '#material-ui/core/styles';
// other imports
const generateClassName = (rule, styleSheet) =>
`${styleSheet.options.classNamePrefix}-${rule.key}`;
test(deterministic classnames, () => {
render(
<StylesProvider generateClassName={generateClassName}>
<App />
</StylesProvider>
);
});