当material ui滑块有多个拇指时，如何分别设置每个拇指的样式？

当material ui滑块有多个拇指时，可以通过自定义样式来分别设置每个拇指的样式。以下是一种实现方式：

首先，为每个拇指创建一个独立的CSS类，用于设置其样式。例如，我们可以创建两个拇指，分别为thumb1和thumb2。
在CSS文件中，使用这些类来定义每个拇指的样式。可以设置拇指的颜色、大小、形状等属性。例如：

.thumb1 {
  background-color: red;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.thumb2 {
  background-color: blue;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

在使用material ui滑块组件时，为每个拇指应用相应的CSS类。可以通过thumb属性来指定每个拇指的样式类。例如：

import Slider from '@material-ui/core/Slider';

<Slider
  defaultValue={[20, 80]}
  aria-labelledby="discrete-slider"
  valueLabelDisplay="auto"
  marks
  min={0}
  max={100}
  ThumbComponent={(props) => (
    <span {...props} className={props.index === 0 ? 'thumb1' : 'thumb2'} />
  )}
/>

在上述代码中，我们通过ThumbComponent属性自定义了拇指的渲染方式。根据props.index的值，我们为第一个拇指应用了thumb1类，为第二个拇指应用了thumb2类。

这样，每个拇指就可以根据其对应的样式类来展示不同的样式。

请注意，上述代码中的CSS类和组件名称仅作示例，实际使用时需要根据具体需求进行调整。

关于material ui滑块的更多信息和使用方法，可以参考腾讯云的相关产品文档：Material-UI Slider