[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