Currently, I am utilizing the MUI-Slider component within React to showcase a value. My objective is to personalize the 'thumb' and valueLabel to boast a larger font size and thumb appearance. Despite referencing MUI's documentation on CSS customization for the thumb, my attempts have been somewhat limited in success. You can view how my slider currently appears here. While the thumb and dot appear blue, everything else is grey with very small font sizing.
Here's a snippet of my React component code: Note: the sx usage has been directly borrowed from the MUI documentation, as demonstrated here.
import { Slider } from '@material-ui/core';
<Slider
disabled
min={0}
max={100}
value={50}
marks={[
{ value: 0, label: '0' },
{ value: 100, label: '100' },
]}
aria-label="Conviction Score"
color="primary"
sx={{
'& .MuiSlider-thumb': {
borderRadius: '1px',
},
}}
valueLabelDisplay="on"
orientation="vertical"
valueLabelFormat={value => `${value.toFixed(1)}`}
></Slider>
In an attempt to adjust the styling, I inserted the following SCSS code. While I was able to modify the thumb color, altering any font attributes seems to be elusive.
color:#0d47a1;
font-size: 20px !important;
font-weight: bold !important;
}
I am puzzled by what mistake I might be making. Could this customization be achieved solely through CSS?