-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
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][Slider][CssVarsProvider] Custom SliderThumb
with CssVarsProvider
is broken after upgrade @mui/material
to 5.15.14
#41753
Comments
SliderThumb
with CssVarsProvider
is broken after upgrade @mui/material
to 5.15.14
SliderThumb
with CssVarsProvider
is broken after upgrade @mui/material
to 5.15.14
can you assign this to me |
After upgrading to |
It's interesting that it works well with ThemeProvider: https://stackblitz.com/edit/react-ceuj3r-qlzp31?file=Demo.tsx or without any theme provider: https://stackblitz.com/edit/react-ceuj3r-ybpmz3?file=Demo.tsx. It seems to be an issue specifically with |
What is the current plan for |
I tried to debug it and noticed that the However, I couldn't determine why this is happening. @siriwatknp, could you take a look? As a temporary workaround to unblock your upgrade (if it's crucial to upgrade const StyledSlider = styled(Slider)(() => {
return {
[`& .${sliderClasses.thumb}`]: {
'&:hover': {
background: 'red',
},
},
};
}); You can find the StackBlitz example here. |
It may be a regression from #41201, I can't see any other change that is related to this component. |
I found the issue, it was a wrong CSS value, that ended with "}" which broke the next CSS selector. I will cherry pick to master too, so we can release it next week. To the original question, @vimutti77 it's safe to use the CssVarsProvider, we are stabilizing the API in v6. This issue was not related to it not working, it was a wrong CSS value in the component itself. Honestly, took me two hours to dissect the wrong line that produced this 😅 |
Steps to reproduce
Link to live example: (required)
Steps:
SliderThumb
is broken'&:hover': { background: 'red' }
has been applied to every elementsCurrent behavior
Position of the
SliderThumb
is broken'&:hover': { background: 'red' }
has been applied to every elementsExpected behavior
Position of the
SliderThumb
is correct'&:hover': { background: 'red' }
is only applied toSliderThumb
Context
I have a project that use
CssVarsProvider
and have a customSlider
. After I upgrade@mui/material
to5.15.14
, the style is broken.Your environment
npx @mui/envinfo
Search keywords: CssVarsProvider, Slider, SliderThumb
The text was updated successfully, but these errors were encountered: