Material-UI: องค์ประกอบการจัดอันดับเปลี่ยนสีตามค่า

Aug 17 2020

เป้าหมาย

ในการเปลี่ยนสีของการให้คะแนน (ส่วนประกอบ material-ui) ตามค่าระหว่างการวางเมาส์เหนือ ตัวอย่างเช่นถ้าฉันวางเมาส์บนดาวที่ 1 สีจะกลายเป็นสีแดงถ้าบนดาวที่ 5 จะกลายเป็นสีเขียว

ฉันได้ลองสร้างองค์ประกอบที่กำหนดเองซึ่งเปลี่ยนสีเมื่อวางเมาส์แบบนี้ -

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

แต่มันเปลี่ยนสีของไอคอนทั้งหมด

ใครช่วยแนะนำฉันวิธีเปลี่ยนไอคอนเฉพาะในสีการจัดอันดับตามค่าที่ฉันเลือกหรือวางเมาส์เหนือ

การเชื่อมโยง Sandbox ปัจจุบัน

คำตอบ

3 hgb123 Aug 17 2020 at 17:01

คุณสามารถใช้สไตล์ไดนามิก (การแทนที่สไตล์ด้วยคลาส )

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

Neha Aug 19 2020 at 05:02

ฉันได้สร้างคำตอบสำหรับคนประเภท typescript ที่เราจำเป็นต้องประกาศสถานะ

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>