如何更改material-ui滑块的拇指图标答案

【问题标题】：How to change the thumb icon of the material-ui slider如何更改material-ui滑块的拇指图标
【发布时间】：2019-11-20 06:38:38
【问题描述】：

我想为滑块设置自定义图标，如上图所示。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以使用AirbnbSlider 设置ThumbComponent 来更改图标。 https://material-ui.com/components/slider/#discrete-sliders

https://www.tutorialguruji.com/react-js/how-to-style-each-thumb-independently-when-material-ui-slider-have-multiple-thumbs/

function AirbnbThumbComponent(props) {
  return (
    <span {...props}>
      <span className="bar" />
      <span className="bar" />
      <span className="bar" />
    </span>
  );
}
...
...
<AirbnbSlider 
     ThumbComponent={AirbnbThumbComponent} 
     defaultValue={[20]} 
/>

【讨论】：

你成功了吗？你能分享例子吗？
实际上是否有关于如何执行此操作的文档，或者我们是否只有一个显示它的 Codesandbox，仅此而已？我也想更改滑块的其他组件。