如何对嵌套元素使用主题覆盖？

Question

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

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

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

我怎么能说我只希望MuiSvgIcon在元素内找到元素时应用属性MuiButton？

Answer 1

好吧，我已经找到了一种方法来做到这一点，但它并不理想，因为它依赖于MuiSvgIcon. 但它可能作为其他人的起点。更好的答案是最受欢迎的。

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

它的工作原理是将样式应用于<svg>JSX<Button variant="fab">元素内的 DOM元素。