MUI スライダー コンポーネント: 異なる色の親指

Question

MUI にはスライダー コンポーネントがあります: https://mui.com/material-ui/react-slider/

現在、これを使用してユーザーが値の範囲を選択できるようにしています（つまり、スライダーには親指が2つあります） MUI マルチサム スライダーのドキュメント: https://codesandbox.io/s/gptppq?file=/demo.js

スライダーのサムは次のようにスタイル設定できます: https://codesandbox.io/s/359l9t?file=/demo.tsx:3809-3812

私の質問: 2 つの親指に異なるスタイル/色を持たせるにはどうすればよいですか?

Answer 1

CSS 属性セレクター を通じて data-index プロパティをターゲットにできます。例:

リーリー ＃＃＃生産する：＃＃＃

作業中のコードサンドボックス: https://codesandbox.io/s/mui-individually-styled-thumbs-c5m2q9