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

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

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

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