I've integrated MUI's Slider component into my React project in the following manner:
<Slider
id={name}
aria-label="Restricted values"
defaultValue={defaultValue}
getAriaValueText={valuetext}
step={step}
value={value}
valueLabelDisplay={valueLabelDisplay}
marks={options}
onChange={onChange}
onClick={triggerValidation || null}
min={min}
max={max}
disabled={disabled}
/>
Currently, the first marksLabel value appears as follows in the html:
<span aria-hidden="true" data-index="0" class="MuiSlider-markLabel-jynbEM hiERdh MuiSlider-markLabel MuiSlider-markLabelActive" style="left: 0%;">400</span>
To change the positioning to left: 3% or apply margin-left and margin-right to the first and last instances of this markLabel, I attempted the following CSS:
.MuiSlider-markLabel {
color: #a3b2cc;
&:first-child {
left: 3% !important;
margin-left: 20px;
}
}
Unfortunately, this code doesn't achieve the desired result. What key aspect am I overlooking?