CSS Variables Being Overridden After Page Load

[jamesga1]

Sorry if there's a better location to ask this and feel free to move it wherever.

We've recently updated from v5.16.7 up to 6.0.0 and would like to use css-variables, but ideally without having to populate createThemes with a light and dark mode palette.

theme.tsx

export const theme = createTheme({
  cssVariables: {
    colorSchemeSelector: '.theme-%s',
  },
  colorSchemes: { light: true, dark: true },
  breakpoints: {
    values: {
      xSmall: 0,
      small: 600,
      medium: 960,
      large: 1280,
      xLarge: 1440,
      xxLarge: 1920,

      // generic device sizes
      mobile: 425,
      tablet: 640,
      laptop: 1024,
      desktop: 1280,
    },
  },
  typography: {
    fontFamily: 'var(--font-family)',
  },
});

styles.scss

.theme-light {
  --mui-palette-primary-main: red;
  --mui-palette-primary-dark: maroon;
}

.theme-dark {
  --mui-palette-primary-main: olive;
  --mui-palette-primary-dark: green;
}

If we update the styles.scss with a new value and HMR updates the page, we are able to see the correct color, but as soon as we refresh the page, the colors will default back to their stock values:

<Button variant="contained" color="primary" type="submit"  disabled={isSubmitting}>
  Submit
</Button>

Is there a way to be able to accomplish this, or will the mui generated css variables always override those in styles.scss.

Search keywords:

[siriwatknp]

Thanks for asking. The root cause might be the insertion point. Try this https://mui.com/material-ui/migration/v5-style-changes/#style-library

I managed to find a workaround by wrapping the CSS theme variables with@layer:

const sheets = theme.generateStyleSheets();
const newSheets = sheets.map((sheet) => {
  return {
    "@layer tokens": sheet,
  };
});
theme.generateStyleSheets = () => newSheets;

function App() {
  return <ThemeProvider theme={theme}>…</ThemeProvider>
}

https://github.com/siriwatknp/material-ui-v6-vite-scss

[fetters5]

When using NX we have noticed that the emotion global style are inserted last and thus override anything in styles.css even if I add <StyledEngineProvider injectFirst > above the theme provider.

If I make the change the hot reload moves the styles related css to the bottom

Not sure if this is the intention but will try the work around

[siriwatknp]

When using NX we have noticed that the emotion global style are inserted last and thus override anything in styles.css even if I add <StyledEngineProvider injectFirst > above the theme provider.

This is a known issue for Emotion emotion-js/emotion#2790. It should be fixed from the Emotion side.