Material-UI: Componente de clasificación, cambia el color según el valor
Objetivo
Para cambiar el color de las calificaciones (un componente material-ui) según el valor durante el desplazamiento. Por ejemplo, si me desplazo sobre la primera estrella, el color se vuelve rojo, si está en la quinta estrella, se vuelve verde.

Intenté hacer un componente personalizado que cambia de color al pasar el mouse, como este:
const StyledRating = withStyles({
root: {
color: "#ff6d75",
},
iconFilled: {
color: '#ff6d75',
},
iconHover: {
color: '#fff',
backgroundColor: "#000",
},
})(Rating);
Pero cambia el color de todos los iconos.
¿Alguien puede guiarme, por favor, cómo cambiar íconos específicos en el color de las clasificaciones en función del valor que selecciono o sobre el que pasé el cursor?
Enlace de sandbox actual .
Respuestas
Puede usar un estilo dinámico ( estilos de reemplazo con clases )
const useStyles = makeStyles({
root: {
// ...
},
'icon-1': { color: 'red' },
'icon-2': { color: 'coral' },
'icon-3': { color: 'orange' },
'icon-4': { color: 'skyblue' },
'icon-5': { color: 'green' }
});
export default function HoverRating() {
// ...
return (
<div className={classes.root}>
<Rating
classes={{
iconHover: classes[`icon-${Math.ceil(hover)}`]
}}
//...
/>
...
</div>
);
}
He formado una respuesta para personas mecanografiadas en las que necesitamos haber declarado el estado.
https://codesandbox.io/s/ratings-vksqc?file=/demo.tsx
<div className={classes.root}>
<Rating
name="hover-feedback"
value={value}
precision={1}
onChange={(event, newValue) => {
console.log(event, "This is th e event");
setValue(newValue);
switch (true) {
case newValue <= 1: {
setIconFilled(classes.iconFilled1);
break;
}
case newValue <= 2 && newValue > 1: {
setIconFilled(classes.iconFilled2);
break;
}
case newValue <= 3 && newValue > 2: {
setIconFilled(classes.iconFilled3);
break;
}
case newValue <= 4 && newValue > 3: {
setIconFilled(classes.iconFilled4);
break;
}
case newValue > 4: {
setIconFilled(classes.iconFilled5);
break;
}
}
}}
onChangeActive={(event, newHover) => {
switch (true) {
case newHover <= 1: {
setIconHover(classes.iconHover1);
break;
}
case newHover <= 2 && newHover > 1: {
setIconHover(classes.iconHover2);
break;
}
case newHover <= 3 && newHover > 2: {
setIconHover(classes.iconHover3);
break;
}
case newHover <= 4 && newHover > 3: {
setIconHover(classes.iconHover4);
break;
}
case newHover > 4: {
setIconHover(classes.iconHover5);
break;
}
}
}}
defaultValue={2}
icon={<FiberManualRecordIcon fontSize="inherit" />}
classes={{
iconFilled: iconFilledVar,
iconHover: iconHoverVar
}}
/>
</div>