如何在Material UI 4.0中修改图标大小？设置fontSize等属性不生效

样式不生效核心是两点：

• 你把fontSize、宽高样式都写在了外层IconButton上，但RemoveIcon是独立的SVG组件，自带默认字号样式，默认不会继承父按钮的字号属性
• IconButton的size="small"属性会给内部图标注入默认小尺寸样式，优先级比你挂在按钮上的自定义类名高

任选一种方式调整即可：

方案1：直接给图标组件挂样式类 #

把尺寸、颜色相关样式从IconButton的类名中拆分出来，挂到内部的RemoveIcon上，是最稳妥的写法：

<Tooltip title="Disminuir cuotas">
  <IconButton
    className={clsx(classes.minusIcon, {
      // 如果这个类是控制按钮位置的就留在这里，控制图标大小就移到图标上
      [classes.quotaIconsRight]: buttonsToTheRight
    })}
    size="small"
    color="primary"
    onClick={() => handleBillingsNumber('minus')}
  >
    {/* 尺寸、颜色类直接挂给图标本身 */}
    <RemoveIcon className={classes.quotaIcons} />
  </IconButton>
</Tooltip>

原有样式代码不需要改动即可生效：

const useStyles = makeStyles(theme => ({
  quotaIcons: {
    fontSize: 32,
    color: theme.palette.primary.main
  },
  minusIcon: {
    marginRight: theme.spacing(2)
  },
  quotaIconsRight: {
    fontSize: 8
  },
}));

方案2：用图标自带属性控制尺寸 #

MUI图标原生支持fontSize属性，不需要额外写自定义样式就能快速选预设尺寸：

{/* 可选值：'inherit' | 'large' | 'medium' | 'small' */}
<RemoveIcon fontSize="large" />

如果需要非标准的自定义尺寸，配合方案1的自定义类写具体fontSize数值即可。

方案3：让图标继承父按钮字号 #

如果想统一在IconButton层控制大小，可以通过选择器命中内部SVG，强制让图标继承父级字号：

const useStyles = makeStyles(theme => ({
  quotaIcons: {
    fontSize: 32,
    color: theme.palette.primary.main,
    '& svg': {
      fontSize: 'inherit'
    }
  },
  // 其余样式保持不变
}))

注意：如果用height、width属性控制大小，同样需要把样式写到SVG图标本身，或者通过& svg选择器命中内部图标元素；直接把宽高加在IconButton上只会修改按钮的点击热区范围，不会改变图标本身的显示尺寸。

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