One method to alter the color of the disabled track in Mui <slider> is to use the "overrides" property to target the ".MuiSlider-rail" and ".Mui-disabled" classes, and set the "backgroundColor" property to the desired color. Here is an example:
import Slider from '@material-ui/core/Slider';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createMuiTheme({
overrides: {
MuiSlider: {
rail: {
'&.Mui-disabled': {
backgroundColor: 'lightgray',
},
},
},
},
});
function MyComponent() {
return (
<ThemeProvider theme={theme}>
<Slider disabled />
</ThemeProvider>
);
}
In this example, the disabled track of the Slider component will be colored with light gray. You can replace this value with any other valid CSS color value.
Asked: 2023-06-24 18:49:37 +0000
Seen: 7 times
Last updated: Jun 24 '23