[material-ui][AppRouterCacheProvider] enableCssLayer not working as expected

[mtr1990]

Steps to reproduce

I couldn't reproduce on codesandbox so I'll attach the repo here

https://github.com/mtr1990/test-css-vars

Current behavior

    <AppRouterCacheProvider
      options={{
        key: 'css',
        prepend: true,
        // enableCssLayer: true,
      }}
    >
      <CssBaseline />
      <CssVarsProvider theme={theme}>{children}</CssVarsProvider>
    </AppRouterCacheProvider>

When enableCssLayer is false some components are broken like:

But styles are overridable

When enableCssLayer is true works fine. But the style cannot be overridden

Expected behavior

Ability to override type when enableCssLayer = true

Present

Expect:

Context

No response

Your environment

No response

Search keywords: enableCssLayer

[brijeshb42]

I found that the issue is due to invalid generated css causing other css to not be applied when enableCssLayer is enabled.

.css-1lszvsm-MuiSlider-thumb{position:absolute;width:20px;height:20px;box-sizing:border-box;border-radius:50%;outline:0;background-color:currentColor;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-transition:box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.css-1lszvsm-MuiSlider-thumb::before{position:absolute;content:"";border-radius:inherit;width:100%;height:100%;box-shadow:var(--md-demo-shadows-2);}.css-1lszvsm-MuiSlider-thumb::after{position:absolute;content:"";border-radius:50%;width:42px;height:42px;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}.css-1lszvsm-MuiSlider-thumb.Mui-disabled:hover{box-shadow:none;}.css-1lszvsm-MuiSlider-thumb:hover,.css-1lszvsm-MuiSlider-thumb.Mui-focusVisible{box-shadow:0px 0px 0px 8px rgba(var(--md-demo-palette-primary-mainChannel) / 0.16);}@media (hover: none){.css-1lszvsm-MuiSlider-thumb:hover,.css-1lszvsm-MuiSlider-thumb.Mui-focusVisible{box-shadow:none;}}.css-1lszvsm-MuiSlider-thumb.Mui-active{box-shadow:0px 0px 0px 14px rgba(var(--md-demo-palette-primary-mainChannel) / 0.16);}

top:50%;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);

Note that the last 5 properties are stray without any wrapped selector. Need to look more into why this is happening.

cc: @siriwatknp

[siriwatknp]

I found that the issue is due to invalid generated css causing other css to not be applied when enableCssLayer is enabled.

When enabled or not enabled?

Ability to override type when enableCssLayer = true

What do you mean by "But the style cannot be overridden"? The undefined layer will override the @mui layer by default. This is how CSS layer works.

[brijeshb42]

when enableCssLayer is enabled

[mtr1990]

When enabled or not enabled?

My behavior is to style in .jsx file with: styled (enableCssLayer ===true)

Ex: export const StyledToaster = styled(SonnerToaster)(({ theme }) => {...}

And it cannot override existing properties: width, height...

I also tried styling it in the .css file. However, it cannot override existing properties such as width and height.

@layer test {
  :where([data-sonner-toast]) :where([data-icon]) {
    color: red;
    background: green;
    width: 100px;
    height: 100px;
  }
}

:where([data-sonner-toast]) :where([data-icon]) {
  color: red;
  background: green;
  width: 100px;
  height: 100px;
}

with enableCssLayer = false the override works fine. but components like sliders will break.

[mtr1990]

[Update] with enableCssLayer = false I change:

styleOverrides: {
    thumb: ({ theme }) => ({
      borderWidth: 1,
      borderStyle: 'solid',
      width: SIZE.thumb.medium,
      height: SIZE.thumb.medium,
      boxShadow: theme.customShadows.z1,
      color: theme.vars.palette.common.white,
      borderColor: varAlpha(theme.vars.palette.grey['500Channel'], 0.08),
      '&::before': {
        opacity: 0.4,
        boxShadow: 'none',
        width: 'calc(100% - 4px)',
        height: 'calc(100% - 4px)',
        backgroundImage: `linear-gradient(180deg, ${theme.vars.palette.grey[500]} 0%, ${varAlpha(theme.vars.palette.grey['500Channel'], 0)} 100%)`,
        [stylesMode.dark]: { opacity: 0.8 },
      },
    }),
    thumbSizeSmall: { width: SIZE.thumb.small, height: SIZE.thumb.small },
}

To:

  styleOverrides: {
    root: ({ theme }) => ({
      [`& .${sliderClasses.thumb}`]: {
        borderWidth: 1,
        borderStyle: 'solid',
        width: SIZE.thumb.medium,
        height: SIZE.thumb.medium,
        boxShadow: theme.customShadows.z1,
        color: theme.vars.palette.common.white,
        borderColor: varAlpha(theme.vars.palette.grey['500Channel'], 0.08),
        '&::before': {
          opacity: 0.4,
          boxShadow: 'none',
          width: 'calc(100% - 4px)',
          height: 'calc(100% - 4px)',
          backgroundImage: `linear-gradient(180deg, ${theme.vars.palette.grey[500]} 0%, ${varAlpha(theme.vars.palette.grey['500Channel'], 0)} 100%)`,
          [stylesMode.dark]: { opacity: 0.8 },
        },
      },
    }),
    sizeSmall: {
      [`& .${sliderClasses.thumb}`]: { width: SIZE.thumb.small, height: SIZE.thumb.small },
    },
 }   

to fix. The problem may lie in the slots

[mkarajohn]

I am also facing this issue with AppRouterCacheProvider (import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter') on Next 15, on a fresh project

[siriwatknp]

I found that the issue is due to invalid generated css causing other css to not be applied when enableCssLayer is enabled.

I tested using the provided repo and I could not reproduce. The generated styles are correct. Both with or without enableCssLayer.

Another point from the author, by using enableCssLayer, all styles from Material UI (including styled) is wrapped in a Cascade layer named @layer mui. Because Sonner styles are defined without @layer, it will always win. This is expected from CSS stand point.

I recommend to custom styles without enableCssLayer or doing it in a plain CSS file.

I am closing this issue. @mkarajohn feel free to reopen with details and reproducible sandbox.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@mtr1990 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.