Search code examples
reactjsmaterial-uifrontendslider

Changing the text color of marks of the slider. / React / MUI 5

I'm new to MUI 5 and I'm struggling to access the marks property of the slider, to change its color.

Here is my slider code:

           <Slider
                color="secondary"
                defaultValue={cursorWeight}
                min={1}
                max={3}
                onChange={handleChangeCursorWeight}
                valueLabelDisplay="auto"
                marks={[
                  { value: 1, label: "Light" },
                  { value: 2, label: "Medium" },
                  { value: 3, label: "Heavy" },
                ]}
              />

By default the text is black: enter image description here

What I'm trying is to change marks text color.

What i found is that from MUI 5 wa are no longer supposed to "createMuiTheme". But rather edit elements directly with "sx"

Example:

        <Slider
                color="secondary"
                defaultValue={cursorWeight}
                min={1}
                max={3}
                onChange={handleChangeCursorWeight}
                valueLabelDisplay="auto"
                marks={[
                  { value: 1, label: "Light" },
                  { value: 2, label: "Medium" },
                  { value: 3, label: "Heavy" },
                ]}
                sx={{
                  background: "red",
                }}
         />

enter image description here

What am I missing is how to point to the "marks element with "sx"?

Solution

  • With sx props:

    <Slider
   ...
   sx={{
     '& .MuiSlider-markLabel': {
       color: 'white',
     },
   }}
/>

    with componentsProps:

    <Slider
  ...
  componentsProps={{ markLabel: { style: { color: 'white' } } }}
/>