如何针对嵌套元素使用主题覆盖？仅修改MuiButton内MuiSvgIcon样式

这个问题很常见，我来帮你搞定！你当前的写法会把MuiSvgIcon-root的样式全局应用，想要只作用于按钮内的图标，核心思路是利用MUI主题重写中的嵌套CSS选择器，把图标样式精准限定在按钮元素的范围内。

解决方案代码 #

直接把图标样式嵌套在MuiButton的目标变体（比如你这里的fab）下面，通过后代选择器指定仅作用于按钮内部的图标：

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      fab: {
        width: 36,
        height: 36,
        // 仅对当前按钮内部的SvgIcon生效
        '& .MuiSvgIcon-root': {
          width: 16,
        },
      },
    },
  },
});

原理说明 #

• &在MUI的样式重写中代表当前选择器（也就是.MuiButton-fab）
• & .MuiSvgIcon-root等价于CSS中的.MuiButton-fab .MuiSvgIcon-root，只会选中作为按钮后代的图标元素
• 这样全局其他独立使用的MuiSvgIcon就不会被这个宽度样式影响了

扩展：针对所有按钮内的图标 #

如果你希望所有类型的按钮（不只是fab）内的图标都应用这个样式，可以把样式嵌套在MuiButton的root下：

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        '& .MuiSvgIcon-root': {
          width: 16,
        },
      },
      fab: {
        width: 36,
        height: 36,
      },
    },
  },
});

这样调整后，就能完美实现你想要的效果啦！

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