使用Material UI的makeStyles定义样式无法修改侧边栏图标大小如何解决

问题根因 #

你使用的是Material UI的官方图标组件，这类组件默认内置了高优先级的自带样式，你通过useStyles定义的icon类样式优先级低于组件原生样式，所以fontSize设置被覆盖无法生效。另外你仅在sm及以上宽度断点下设置了字号，若测试时屏幕宽度小于sm阈值（默认600px）也会看不到修改效果。

解决方法 #

你可以任选以下任意一种方案修复：

• 方案1：通过图标组件原生属性设置大小，符合MUI设计规范，优先级最高
  直接给<Home>图标组件传递字号属性即可，示例代码：

  // 用预设大小
  <Home fontSize="small" />
  // 自定义大小值
  <Home sx={{ fontSize: '18px' }} />
  

• 方案2：提升自定义样式的优先级
  如果你需要统一通过useStyles管理所有样式，可以调整样式写法强制覆盖原生样式：

  // 写法1：加!important强制覆盖
  icon: {
      marginRight: theme.spacing(1),
      [theme.breakpoints.up("sm")]:{
          fontSize: "18px !important"
      }
  }
  // 写法2：指定选择svg元素提升权重，适配MUI图标的DOM结构
  icon: {
      marginRight: theme.spacing(1),
      '& > svg': {
        [theme.breakpoints.up("sm")]:{
            fontSize: "18px"
        }
      }
  }
  

• 方案3：调整makeStyles注入优先级（适配MUI v4版本）
  如果你用的是MUI v4版本，可以给makeStyles添加index参数提升样式注入顺序，优先级高于组件默认样式：

  const useStyles = makeStyles((theme) => ({
    // 原有样式不变
  }), { index: 1 });
  

调试建议 #

你可以先去掉断点配置，直接给icon类设置fontSize: "18px"测试是否生效，快速排除是断点匹配问题还是样式优先级问题。

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