MUI-Slider-Komponente: Verschiedene farbige Daumen

Question

MUI hat eine Slider-Komponente: https://mui.com/material-ui/react-slider/

Ich verwende dies derzeit, um dem Benutzer die Auswahl eines Wertebereichs zu ermöglichen (mein Schieberegler hat also zwei Daumen). Dokumentation zum MUI-Multi-Thumb-Slider: https://codesandbox.io/s/gptppq?file=/demo.js

Der Slider-Daumen kann wie folgt gestaltet werden: https://codesandbox.io/s/359l9t?file=/demo.tsx:3809-3812

Meine Frage: Wie kann ich dafür sorgen, dass die beiden Daumen unterschiedliche Stile/Farben haben?

Answer 1

您可以通过针对data-index prop 通过 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