如何在React项目中为Material-UI Rating组件设置自定义颜色

完全可以自定义 Rating 组件的颜色，不同版本的 Material-UI 实现方式如下：

MUI v5（当前主流版本） #

1. 单次使用：sx 属性内联修改 #

无需额外封装，直接在组件上通过 sx 属性覆盖内置类名样式即可：

import Rating from '@mui/material/Rating';
import StarIcon from '@mui/icons-material/Star';

function SingleUseRating() {
  return (
    <Rating
      defaultValue={3}
      icon={<StarIcon />}
      emptyIcon={<StarIcon />}
      sx={{
        // 已选中星标颜色
        '& .MuiRating-iconFilled': {
          color: '#ff6d75',
        },
        // 星标悬停状态颜色
        '& .MuiRating-iconHover': {
          color: '#ff3d47',
        },
        // 未选中星标颜色
        '& .MuiRating-iconEmpty': {
          color: '#fcb4b9',
        }
      }}
    />
  );
}

2. 多次复用：styled 封装公共组件 #

如果项目多位置使用同一样式的评分组件，可封装为通用组件减少重复代码：

import { styled } from '@mui/material/styles';
import Rating from '@mui/material/Rating';
import StarIcon from '@mui/icons-material/Star';

const CustomRating = styled(Rating)(({ theme }) => ({
  '& .MuiRating-iconFilled': {
    color: '#2e7d32',
  },
  '& .MuiRating-iconHover': {
    color: '#1b5e20',
  },
  '& .MuiRating-iconEmpty': {
    color: '#a5d6a7',
  }
}));

// 业务代码中直接调用
function App() {
  return <CustomRating defaultValue={4} icon={<StarIcon />} emptyIcon={<StarIcon />} />
}

MUI v4 版本 #

如果使用的是 v4 版本，可通过 makeStyles 创建自定义样式覆盖：

import { makeStyles } from '@material-ui/core/styles';
import Rating from '@material-ui/lab/Rating';
import StarIcon from '@material-ui/icons/Star';

const useStyles = makeStyles({
  ratingRoot: {
    '& .MuiRating-iconFilled': {
      color: '#9c27b0',
    },
    '& .MuiRating-iconEmpty': {
      color: '#e1bee7',
    }
  },
});

function CustomRating() {
  const classes = useStyles();
  return (
    <Rating 
      className={classes.ratingRoot} 
      defaultValue={3}
      icon={<StarIcon />}
      emptyIcon={<StarIcon />}
    />
  )
}

内容的提问来源于stack exchange，提问作者Roberto Vizzi