Material-UI: Rating Component, change de couleur en fonction de la valeur

Question

Objectif

Pour changer la couleur des classements (un composant material-ui) en fonction de la valeur pendant le survol. Par exemple, si je passe la souris sur la 1ère étoile, la couleur devient rouge, si sur la 5ème étoile, elle devient verte.

J'ai essayé de créer un composant personnalisé qui change de couleur en survol, comme ceci -

const StyledRating = withStyles({
  root: {
    color: "#ff6d75",
  },
  iconFilled: {
    color: '#ff6d75',
  },
  iconHover: {
    color: '#fff',
    backgroundColor: "#000",
  },
})(Rating);  

Mais cela change toutes les couleurs des icônes.

Quelqu'un peut-il s'il vous plaît me guider, comment modifier des icônes spécifiques dans la couleur des notes en fonction de la valeur que je sélectionne ou que je passe le curseur.

Lien sandbox actuel .

Answer 1

Vous pouvez utiliser un style dynamique ( remplacement des styles avec des classes )

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>
  );
}

Answer 2

J'ai formé une réponse pour les personnes dactylographiées où nous devons avoir déclaré l'état.

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>