I came across a question about Material UI Overriding styles with increased specificity that seemed related to my issue, but I couldn't apply the solution to my problem.
My problem involves a vertical Slider with marks, and I am trying to remove the text-transformation for the marks.
This is how I am setting the styles:
const useStyles = makeStyles((theme) => ({
vertical: {
marginRight: theme.spacing(3),
transform: 'none',
'&$markLabel': {
transform: 'none'
}
},
markLabel: {
transform: 'none'
},
}));
I am trying to use these styles with the Slider like this:
<Slider
orientation="vertical"
marks={marks}
classes={{
vertical: classes.vertical,
markLabel: classes.markLabel
}}
/>
When inspecting in Chrome DevTools, I noticed that the vertical styles are being applied, but they are getting overridden by a more specific class
.MuiSlider-marked.MuiSlider-verticalhttps://i.sstatic.net/Uv0T9.png
The same issue occurs with the text-transformation, where it is applied but then overridden by a more specific combination of two classes
.MuiSlider-vertical .MuiSlider-markLabelhttps://i.sstatic.net/u4UTS.png
I also attempted using a Theme, but unfortunately, that approach did not work as expected:
createTheme({
overrides: {
MuiSlider: {
markLabel: {
transform: 'none'
},
vertical: {
'&$markLabel': {
transform: 'none'
},
},
}
},
});
I would greatly appreciate any assistance with this problem!