Tengo dos entidades para mostrar como un componente de pulgar en Material-UI Slider y necesito un estilo diferente para cada componente de pulgar.

El pulgar de la entidad A debe aparecer en un círculo blanco y el pulgar de la entidad B debe aparecer en un círculo rojo. Logré parcialmente esta funcionalidad usando el índice de datos

 if (data-index === 0) { //show white circle } else { //show red circle }

Sin embargo, hay un gran defecto en esto, es decir, si deslizo la entidad B y la hago pararse frente a la entidad A, entonces la entidad B cambia a un círculo blanco porque el índice de datos de la entidad B se convierte en 0. ¿Hay algún otro enfoque que no sea usar el índice de datos donde yo pueden mantener el estilo independientemente de dónde se encuentren en el control deslizante.

Aquí está la caja de arena.

 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 ( <SliderThumb {...other} className={clsx(className, extraClassName)}> {children} </SliderThumb> ); } ThumbComponent.propTypes = { children: PropTypes.node }; export default function CustomizedSlider() { return ( <Box sx={{ width: 320 }}> <Typography gutterBottom>Airbnb</Typography> <EntitySlider components={{ Thumb: ThumbComponent }} getAriaLabel={(index) => index === 0 ? "Minimum price" : "Maximum price" } defaultValue={[20, 40]} /> </Box> ); }