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' } } }}
    />