React MUI 5中如何通过sx属性修改Slider刻度（marks）的文本颜色？

要通过sx属性定位到Slider的刻度文本，你可以利用CSS后代选择器，直接在Slider的sx中指定目标元素的样式：

<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={{
    // 定位刻度文本元素
    '& .MuiSlider-markLabel': {
      color: 'red', // 替换成你需要的颜色
      // 可额外添加字体大小等样式
      fontSize: '0.875rem'
    }
  }}
/>

原理说明 #

MUI的Slider组件中，刻度对应的文本元素会被赋予MuiSlider-markLabel类名，通过&（代表当前Slider组件的根元素）结合后代选择器，就能精准选中这些文本元素并修改样式。

如果需要区分激活状态的刻度文本（当前选中值对应的标签），可以额外添加对MuiSlider-markLabelActive类的样式：

sx={{
  '& .MuiSlider-markLabel': {
    color: '#666'
  },
  '& .MuiSlider-markLabelActive': {
    color: '#1976d2', // 激活态自定义颜色
    fontWeight: 'bold'
  }
}}

内容的提问来源于stack exchange，提问作者Leo