无法覆盖MUI Rating组件默认样式，设置fontSize不生效求助

你遇到的问题是因为MUI Rating组件的内部星星图标有独立的样式优先级，直接给Rating组件设置fontSize无法覆盖图标自身的尺寸设置。以下是两种可行的解决方案：

方案一：通过CSS选择器覆盖图标样式 #

直接在sx属性中使用类选择器定位到Rating的内部图标，强制覆盖其字体大小：

import { Rating } from '@mui/material';

export const Stars = () => {
  return (
    <>
      <Rating name="size-large" defaultValue={2} size="large" />
      <Rating
        name="size-large"
        value={4.5}
        precision={0.5}
        sx={{ '& .MuiRating-icon': { fontSize: '48px' } }}
        size="large"
        readOnly
      />
    </>
  );
};

& .MuiRating-icon会选中Rating组件下所有的星星图标，直接修改它们的fontSize属性，优先级高于组件默认样式。

方案二：自定义图标组件 #

通过icon和emptyIcon属性传入自定义尺寸的图标组件，完全控制图标大小：

import { Rating } from '@mui/material';
import StarIcon from '@mui/icons-material/Star';
import StarBorderIcon from '@mui/icons-material/StarBorder';

export const Stars = () => {
  return (
    <>
      <Rating name="size-large" defaultValue={2} size="large" />
      <Rating
        name="size-large"
        value={4.5}
        precision={0.5}
        icon={<StarIcon sx={{ fontSize: 48 }} />}
        emptyIcon={<StarBorderIcon sx={{ fontSize: 48 }} />}
        size="large"
        readOnly
      />
    </>
  );
};

这种方式直接替换默认图标，图标尺寸完全由你设置的fontSize决定，不会受组件默认样式影响。

内容的提问来源于stack exchange，提问作者Paul Gutsal