reactjs - Material-UI : Rating Component, 根据值改变颜色

Question

目标
根据悬停期间的值更改评级(一个 material-ui 组件)的颜色。例如，如果我悬停在第 1 颗星上，则颜色变为红色，如果悬停在第 5 颗星上，则变为绿色。

我试过制作一个在悬停时改变颜色的自定义组件，就像这样 -

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

但它改变了所有图标的颜色。
任何人都可以指导我如何根据我选择或悬停的值更改评级颜色中的特定图标。
Current sandbox link .

Answer 1

您可以使用动态样式( Overriding styles with 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>
  );
}