如何放大Material-ui Rating组件的星星图标

MUI Rating组件的图标默认使用em作为尺寸单位，你页面根字体设置为html { font-size: 62.5% }后，1em的实际渲染尺寸被缩小为10px，所以图标显示过小。

你可以选择以下任意一种方式修改：

方式1：直接给图标组件设置尺寸（最简单） #

你自定义了空状态图标，可直接给StarOutlineIcon组件传fontSize属性，同时补充填充状态的图标配置即可：

// 先引入填充状态的星星图标
import StarIcon from '@material-ui/icons/Star';

// Rating组件修改部分
<Rating
  classes={{
    iconFilled: classes.iconFilled,
    iconEmpty: classes.iconEmpty
  }}
  // 给两个图标都设置尺寸，支持small/medium/large预设值，或者直接写数值如24
  emptyIcon={<StarOutlineIcon fontSize="large" />}
  icon={<StarIcon fontSize="large" />}
  // 其余原有属性保持不变
/>

方式2：通过自定义样式覆盖图标尺寸 #

在现有样式配置中，针对图标类下的svg元素设置尺寸即可：

const styles = theme => ({
  iconFilled:{
    color: theme.palette.primary.main,
    '& svg': {
      fontSize: '2rem' // 可替换为你需要的任意尺寸，比如24px
    }
  },
  iconEmpty:{
    color: theme.palette.primary.main,
    '& svg': {
      fontSize: '2rem'
    }
  }
})

方式3：修改Rating根元素字体大小 #

因为图标尺寸继承父元素字体大小，直接给Rating根元素设置font-size即可统一缩放所有图标：

const styles = theme => ({
  ratingRoot: {
    fontSize: '2rem'
  },
  // 保留原有其他样式
  iconFilled:{
    color:theme.palette.primary.main,
  },
  iconEmpty:{
    color:theme.palette.primary.main
  }
})

// 给Rating组件绑定根类
<Rating
  classes={{
    root: classes.ratingRoot,
    iconFilled: classes.iconFilled,
    iconEmpty: classes.iconEmpty
  }}
  // 其余原有属性保持不变
/>

内容的提问来源于stack exchange，提问作者Adrián