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
您可以透過針對
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