I have been attempting to customize the MUI slider by applying styles using the className prop. However, I am facing an issue where the styles assigned to the main class are not being applied, but other styles such as the 'hover' state are working fine. If I remove all classes and simply style it using the SX prop, everything functions correctly. Nevertheless, I prefer to keep my styles organized in an external CSS file.
Below is the code example:
App.css
.container{
margin-left: 30%;
margin-top: 20%;
}
/* This style is not being applied */
.slider {
color: #ff0000;
width: 300px;
}
.slider:hover {
color: #2e8b57;
}
.slider > .MuiSlider-thumb {
border-radius: 1px;
}
App.js
import "./App.css"
import * as React from 'react';
import Slider from '@mui/material/Slider';
export default function App() {
return (
<div className="container">
<Slider className="slider" defaultValue={30} />
</div>
);
}