css - 如何更改材质ui评级星星的边框颜色

Question

我需要更改材质 ui Rating 中星星的边框颜色，因为我的背景颜色是黑色，当星星为空时我什么也看不到！

代码：

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

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    '& > * + *': {
      marginTop: theme.spacing(1),
     
    },
  
  },
 
}));

在功能组件中：

<div className={classes.root}>
                  <Rating name="half-rating-read" defaultValue={finalAverage} precision={0.5} readOnly />
                </div>

标签： cssreactjsmaterial-uireact-functional-component

Answer 1

您需要为空的图标导入一个带边框的图标，StarBorderIcon然后像这样添加它：

import Rating from "@material-ui/lab/Rating";
import StarBorderIcon from "@material-ui/icons/StarBorder";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    flexDirection: "column",

    "& > * + *": {
      marginTop: theme.spacing(1)
    }
  },
  emptyStar: {
    color: "white"
  }
}));
const Star = () => {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Rating
        name="half-rating-read"
        defaultValue={3.5}
        precision={0.5}
        readOnly
        emptyIcon={
          <StarBorderIcon fontSize="inherit" className={classes.emptyStar} />
        }
      />
    </div>
  );
};
export default Star;