Question

如果我调整主题中按钮的大小，就像这样：

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

然后按钮和图标以我想要的尺寸显示。但是，这会影响所有图标，无论它们是否在按钮内！

如果在MuiSvgIcon元素中找到元素，我怎么能说我只想应用MuiButton属性？

Answer 1

我已经找到了一种方法来做到这一点，但它并不理想，因为它依赖于const theme = createMuiTheme({ overrides: { MuiButton: { fab: { width: 36, height: 36, '& svg': { width: 16, }, }, }, }, };的内部结构。但它可能成为其他人的起点。我们非常欢迎更好的答案。

<svg>

它的工作原理是将样式应用于JSX <Button variant="fab">元素内的protocol Delegate where Self:Root{ var titleImage:UIImage? {get} } DOM元素。

Answer 2

不幸的是，没有任何文档，但是您可以使用任何类型的CSS选择器来提供帮助。使用“属性包含”模式和class属性本身来定位后代：

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

注1： 注意！ 。默认情况下，Material UI会在产品构建中最小化这些类名。如果要为生产保留这些类名，则需要调整类生成器函数：https://material-ui.com/customization/css-in-js/（请参见dangerouslyUseGlobalCSS）

注意2：使用这种模式，如果您已经要覆盖竞争的内联样式，则有时您不必使用!important。如果您使用的是styled-components，则可以使用&&（请参阅Material UI docs）来提高特异性。

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

2 个答案: