84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
MUI 有一个滑块组件：https://mui.com/material-ui/react-slider/
我目前正在使用它来允许用户选择一个值范围（所以我的滑块有两个拇指） MUI 多拇指滑块文档：https://codesandbox.io/s/gptppq?file=/demo.js
滑块拇指的样式可以如下所示：https://codesandbox.io/s/359l9t?file=/demo.tsx:3809-3812
我的问题：如何使两个拇指具有不同的样式/颜色？
您可以通过针对data-index prop 通过 CSS 属性选择器.例如：
data-index
<Slider value={value} onChange={handleChange} sx={{ "& .MuiSlider-thumb": { "&[data-index='0']": { backgroundColor: "pink" }, "&[data-index='1']": { backgroundColor: "yellow" } } }} />
产生：
工作 CodeSandbox： https://codesandbox.io/s/mui-individually-styled-thumbs-c5m2q9
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您可以通过针对
data-indexprop 通过 CSS 属性选择器.例如：<Slider value={value} onChange={handleChange} sx={{ "& .MuiSlider-thumb": { "&[data-index='0']": { backgroundColor: "pink" }, "&[data-index='1']": { backgroundColor: "yellow" } } }} />产生：
工作 CodeSandbox： https://codesandbox.io/s/mui-individually-styled-thumbs-c5m2q9