New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[material-ui][AppRouterCacheProvider] enableCssLayer not working as expected #42109
Comments
I found that the issue is due to invalid generated css causing other css to not be applied when .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 |
When enabled or not enabled?
What do you mean by "But the style cannot be overridden"? The undefined layer will override the |
|
[Update] with 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 |
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
When enableCssLayer is
false
some components are broken like:But styles are overridable
When enableCssLayer is
true
works fine. But the style cannot be overriddenExpected behavior
Ability to override type when
enableCssLayer
=true
Present
Expect:
Context
No response
Your environment
No response
Search keywords: enableCssLayer
The text was updated successfully, but these errors were encountered: