Material-UI：评级组件，根据值更改颜色 [英] Material-UI : Rating Component, change color based on value

问题描述

目标

根据悬停期间的值更改评级(材质-UI组件)的颜色。例如，如果我在第一颗星上悬停，颜色会变成红色，如果在第五颗星上，颜色就会变成绿色。

我尝试制作了一个在悬停时更改颜色的自定义组件，如下所示-

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

但它会更改所有图标的颜色。

是否有人可以指导我如何根据我选择或悬停的值更改分级颜色中的特定图标。

Current sandbox link。

推荐答案

我已经为需要声明状态的打字员制定了答案。

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>

这篇关于Material-UI：评级组件，根据值更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！