mui styles not initially rendering on page with multiple components (in production only)

[doaboa]

I'm transitioning a rails-only app. I currently have two react components, and they behave correctly in my local environment.

In production/staging, the app works correctly, except when I load a page that contains both components. In that case, the react components initially show mostly incorrect styles that don't exist anywhere else in my app.

I've double-checked the docs and examples a few times, would appreciate your help. I'm using MUI as well.

[doaboa]

the issue is related to the way JSS and MUI interact. In production, jss generates all classnames as js-#, hence the class contamination. closing as it's unrelated to webpacker.

[doaboa]

For anyone who needs the fix, you can add a prefix to classes by overwriting the default generateClassName rules:

import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import { jssPreset } from '@material-ui/core/styles';

let counter = 0
const generateClassName = (rule, sheet) => `sidenav--${rule.key}-${counter++}`
const jss = create(jssPreset())

Then wrap your MuiThemeProvider in the JSS HOC

<JssProvider jss={jss} generateClassName={generateClassName}>
    <MuiThemeProvider theme={this.feedThemeVariables()}>
        **code**
    </MuiThemeProvider>
</JssProvider>