Material ui 如何对嵌套元素使用主题替代？

如果我调整主题中按钮的大小，如下所示：

const theme = createMuiTheme({
    overrides: {
        MuiButton: {
            fab: {
                width: 36,
                height: 36,
            },
        },
        MuiSvgIcon: {
            root: {
                width: 16,
            },
        },
    },
};

然后按钮和图标以我想要的大小出现。但是，这会影响所有图标，无论它们是否位于按钮内

---

当在

MuiButton

元素中找到元素时，我怎么能说我只想应用

MuiSvgIcon

属性呢？

我已经找到了一种方法来实现它，但它并不理想，因为它依赖于

MuiSvgIcon

的内部结构。但这可能会成为其他人的起点。更好的答案是最受欢迎的

const theme = createMuiTheme({
    overrides: {
        MuiButton: {
            fab: {
                width: 36,
                height: 36,
                '& svg': {
                    width: 16,
                },
            },
        },
    },
};

---

它的工作原理是将样式应用于JSX

元素中的

DOM元素。

不幸的是，它没有在任何地方被记录，但是您可以使用任何类型的CSS选择器来提供帮助。将“attribute contains”模式与类属性本身一起使用，以目标子体为目标：

const theme = createMuiTheme({
    overrides: {
        MuiButton: {
            root: {
                // Targets MuiSvgIcon elements that appear as descendants of MuiButton
                '& [class*="MuiSvgIcon-root"]': {
                    width: 16
                }
            },
        },
    },
};

注1:小心默认情况下，Material UI在产品构建中缩小这些类名。如果要为prod保留这些类名，则需要调整类生成器函数：（请参见

危险使用globalcss

）

---

注2：使用此模式，有时您将不得不使用

！重要信息

如果已经存在要覆盖的竞争内联样式。如果您使用的是

样式化组件

，您可以通过使用

&&

（请参阅）来增加特殊性。

是否有给您应用的元素指定一个类的方法？@Roysh：我可以设置一个类名，但如果可能的话，我希望避免使用它，这样我就不必一直记住将它添加到每个按钮上。不过，请随意发布类名选项作为答案。好吧，如果您添加了一个类，那么您可以将css应用于ITI，如果您可以提供完整的代码（即html和css）或发布一篇文章，我可以尝试使用css来解决这个问题。最好的方法是使用组合来创建按钮组件的自定义变体，您可以在项目的任何地方重用它。您的目标是自定义浮动操作按钮或所有按钮的样式（和图标大小）？您知道如何针对具有此类模式的嵌套

<代码>MuiIconButton root-.Heureka！我想出来了。我就是这样做的：

muiInputDornation:{root:{'&button':{color:'#bada55'}}}