Создание стилей из темы Material-UI, которые можно использовать в разных компонентах?

Question

В Material-UI 4 можно легко создавать стили, которые можно использовать внутри компонента. Для этого я использую функцию makeStyles().

const useStyles = makeStyles((theme: Theme) => ({
    hoverableContent: {
        color: theme.palette.primary.contrastText,
        backgroundColor: theme.palette.primary.main,
        '&:hover': {
            backgroundColor: theme.palette.primary.dark
        }
    }
}));

const MyComponent = () => {
    const classes = useStyles();
    ...
}

Однако я хотел бы повторно использовать этот стиль в нескольких компонентах. Каков наилучший способ сделать это в Material-Ui 4?

Примечание: я думаю об этом как об абстракции немного более высокого уровня: разделение абстрактных классов (контролируемым образом) вместо просто цветов (в теме).

Answer 1

Вы можете выполнить одно из следующих действий:

1. Поделиться стилем между вашими компонентами

const styles = (theme: Theme) => ({
    hoverableContent: {
        color: theme.palette.primary.contrastText,
        backgroundColor: theme.palette.primary.main,
        '&:hover': {
            backgroundColor: theme.palette.primary.dark
        }
    }
})

Этот подход приводит к этому вопросу.Как вы объединяете несколько стилей?https://github.com/mui-org/material-ui/issues/11517

Создайте глобальное имя класса и примените его там, где это имеет смысл.Но будьте осторожны с конфликтом имен классов и тряской деревьев