Material-UI: Thành phần xếp hạng, thay đổi màu sắc dựa trên giá trị

Question

Mục tiêu

Để thay đổi màu của Xếp hạng (một thành phần material-ui) dựa trên giá trị trong khi di chuột. Ví dụ: nếu tôi di chuột trên ngôi sao đầu tiên, màu sẽ trở thành màu đỏ, nếu ở ngôi sao thứ 5 thì nó trở thành màu xanh lục.

Tôi đã thử tạo một thành phần tùy chỉnh thay đổi màu sắc khi di chuột, như thế này -

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

Nhưng nó thay đổi tất cả màu sắc của các biểu tượng.

Bất cứ ai có thể vui lòng hướng dẫn tôi, làm thế nào để thay đổi các biểu tượng cụ thể trong màu xếp hạng dựa trên giá trị tôi chọn hoặc di chuột vào.

Liên kết hộp cát hiện tại .

Answer 1

Bạn có thể sử dụng kiểu động ( Ghi đè kiểu bằng các lớp )

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

Tôi đã hình thành một câu trả lời cho những người đánh máy mà chúng ta cần phải khai báo trạng thái.

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>