Как использовать переопределения темы с вложенными элементами?

Question

Если я отрегулирую размер кнопки в теме, например:

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

Тогда кнопка и значок появятся в нужном мне размере. Однако это влияет на все значки, независимо от того, находятся они внутри кнопки или нет!

Как я могу сказать, что я хочу, чтобы свойства MuiSvgIcon применялись только тогда, когда элемент находится внутри элемента MuiButton?

Answer 1

К сожалению, это нигде не задокументировано, но вы можете использовать любой вид CSS-селекторов, чтобы помочь. Используйте шаблон «атрибут содержит» с самим атрибутом класса для нацеливания на потомков:

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

Примечание 1: Внимание! Material UI по умолчанию минимизирует эти имена классов в сборках prod. Если вы хотите сохранить эти имена классов для prod, вам нужно настроить функцию генератора классов: https://material -ui.com / customization / css-in-js / (см. dangerouslyUseGlobalCSS)

Примечание 2: с этим шаблоном иногда вам не нужно использовать !important, если уже есть конкурирующий встроенный стиль, который вы хотите переопределить. Если вы используете styled-components, вы можете увеличить специфичность, используя && (см. Документацию Material UI ).

Answer 2

Ну, я разработал один способ сделать это, но он не идеален, потому что он опирается на внутреннюю структуру MuiSvgIcon. Но это может послужить отправной точкой для кого-то еще. Лучшие ответы приветствуются.

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

Работает, применяя стиль к элементу <svg> DOM внутри элемента JSX <Button variant="fab">.