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>