Comments (5)
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
from material-ui.
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.
from material-ui.
when
enableCssLayer
is enabled
from material-ui.
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.
from material-ui.
[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
from material-ui.
Related Issues (20)
- [material-ui][TextField] Handling long placeholder text
- [material-ui][docs] Table demo EnhancedTable crashes HOT 1
- [material-ui] `color="inherit"` is inconsistent between ThemeProvider and experimental_CssVarsProvider
- [core] Remove `any` from `React.ReactElement` types HOT 2
- [core] Support React 19
- [RFC][material-ui] Deprecate `paragraph` prop on <Typography> HOT 1
- [material-ui][Autocomplete] With limit in `createFilterOptions` doesn't highlight/retain selected value
- [docs-infra] Remove all ES6 transpilation features
- [docs] Confusion around package managers HOT 6
- [docs-infra] Implement debounce to reduce number of requests sent to Algolia during search HOT 7
- Upgrading from `6.0.0-alpha.7` to `6.0.0-alpha.8` breaks styles of TextField HOT 1
- [material-ui][Autocomplete] Slow performance with `renderOption` having Checkbox
- (material-ui@next) MUI InputLabel shrink state is bugged HOT 2
- [docs-infra] Overflow in API view on mobile HOT 1
- Responsive App bar with Drawer not working as intended? HOT 2
- [material-ui] How to properly merge themes that are using styleOverrides functions? HOT 2
- [RFC]
- [material-ui][Table] How to insert a row after a row and before a row on current page HOT 2
- [material-ui][Autocomplete] `openOnFocus` prop doesn't work when used with `limitTags`
- [material-ui] Questions regarding Pigment CSS usage HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.