Material-UI — стиль переключения больших пальцев в слайдере диапазона ⇐ CSS

[Anonymous]

У меня есть два объекта, которые нужно отобразить в качестве компонента миниатюры на слайдере Material-UI, и мне нужны разные стили для каждого компонента миниатюры.
Entity Ползунок должен отображаться белым цветом кружок и большой палец объекта B должны появиться в красном кружке. Я частично достиг этой функциональности, используя индекс данных
if (data-index === 0) {

//show white circle
} else {
//show red circle
}

Однако в этом есть один большой недостаток: если я сдвину объект B и поставлю его перед объектом A, тогда объект B изменится на белый круг, потому что индекс данных объекта B станет 0. существует любой другой подход, кроме использования индекса данных, при котором я могу поддерживать стиль независимо от того, где он находится на слайдере.
Вот песочница.
import * as React from "react";
import PropTypes from "prop-types";
import Slider, { SliderThumb } from "@material-ui/core/Slider";
import { styled } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import clsx from "clsx";

const EntitySlider = styled(Slider)(({ theme }) => ({
color: "#3a8589",
height: 3,
padding: "13px 0",
"& .MuiSlider-thumb": {
height: 27,
width: 27,
backgroundColor: "#fff",
border: "1px solid currentColor",
"&.second-thumb": {
backgroundColor: "red"
},
"&:hover": {
boxShadow: "0 0 0 8px rgba(58, 133, 137, 0.16)"
}
},
"& .MuiSlider-track": {
height: 3
},
"& .MuiSlider-rail": {
color: theme.palette.mode === "dark" ? "#bfbfbf" : "#d8d8d8",
opacity: theme.palette.mode === "dark" ? undefined : 1,
height: 3
}
}));

function ThumbComponent(props) {
const { children, className, ...other } = props;
const extraClassName =
other["data-index"] === 0 ? "first-thumb" : "second-thumb";
return (

{children}

);
}

ThumbComponent.propTypes = {
children: PropTypes.node
};

export default function CustomizedSlider() {
return (

Airbnb

index === 0 ? "Minimum price" : "Maximum price"
}
defaultValue={[20, 40]}
/>

);
}



Подробнее здесь: https://stackoverflow.com/questions/694 ... nge-slider