当Material UI Slider组件包含多个滑块时，如何为每个滑块独立设置样式？

Material UI 范围滑块的每个滑块节点会自动添加data-index属性标记序号，第一个滑块为data-index="0"，第二个为data-index="1"，以此类推，通过该属性即可实现不同滑块的样式隔离。

方式1：通过样式选择器直接配置（简单场景推荐） #

直接在withStyles的样式规则中使用属性选择器匹配不同序号的滑块，无需修改组件逻辑，修改后的AirbnbSlider定义如下：

const AirbnbSlider = withStyles({
  root: {
    color: '#3a8589',
    height: 3,
    padding: '13px 0',
  },
  thumb: {
    height: 27,
    width: 27,
    backgroundColor: '#fff',
    border: '1px solid currentColor',
    marginTop: -12,
    marginLeft: -13,
    boxShadow: '#ebebeb 0 2px 2px',
    '&:focus, &:hover, &$active': {
      boxShadow: '#ccc 0 2px 3px 1px',
    },
    '& .bar': {
      height: 9,
      width: 1,
      backgroundColor: 'currentColor',
      marginLeft: 1,
      marginRight: 1,
    },
    // 匹配第一个滑块（最小值）
    '&[data-index="0"]': {
      borderColor: '#ff4d4f',
      color: '#ff4d4f'
    },
    // 匹配第二个滑块（最大值）
    '&[data-index="1"]': {
      borderColor: '#1890ff',
      color: '#1890ff'
    }
  },
  active: {},
  track: {
    height: 3,
  },
  rail: {
    color: '#d8d8d8',
    opacity: 1,
    height: 3,
  },
})(Slider);

方式2：自定义Thumb组件动态适配（复杂逻辑推荐） #

如果需要根据滑块的当前值、交互状态等动态调整样式，可以直接修改自定义的Thumb组件，通过props拿到data-index后自定义样式，修改后的AirbnbThumbComponent定义如下：

function AirbnbThumbComponent(props) {
  const sliderIndex = props['data-index'];
  // 可根据业务需求扩展更复杂的样式逻辑，比如根据值区间变色
  const thumbCustomStyle = sliderIndex === 0 ? 
    { borderColor: '#ff4d4f', color: '#ff4d4f' } : 
    { borderColor: '#1890ff', color: '#1890ff' };

  return (
    <span {...props} style={{...props.style, ...thumbCustomStyle}}>
      <span className="bar" />
      <span className="bar" />
      <span className="bar" />
    </span>
  );
}

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture