Мне интересно, есть ли хитрый способ использовать компонент classes
prop для переопределения некоторых CSS, определенных в переопределениях темы.
Например: если я хочу, чтобы все Button
компоненты имеют значение font-size
, отличное от значения по умолчанию. Я могу использовать реквизиты theme.overrides, чтобы сделать это:
// this works, all Buttons text is 1.1rem
let theme = createMuiTheme({
overrides: {
MuiButton: {
label: {
"&": {fontSize: "1.1rem"}
}
}
}
})
Теперь, если по какой-то причине одна из моих кнопок должна иметь другой font-size
, я надеялся, что использование классов prop сделает эту работу:
const useClasses = makeStyles({
smallerFontSize: {
fontSize: "0.9rem"
}
})
...
const classes = useClasses()
...
<Button
classes={{
// unfortunately this doesn't work, theme overrides is taking precedence
label: classes.smallerFontSize
}}
>
Some smaller text
</Button>
...
Поскольку использование classes
prop позволяет нам нацеливать и переопределять некоторые компоненты CSS, если значения темы по умолчанию не были переопределены, я нахожу странным, что переопределения темы ведут себя несколько иначе и имеют более высокая специфичность, чем одноразовое правило.
Я бы сказал, что это как бы побеждает цель иметь настраиваемую тему.
Но, надеюсь, я что-то упустил, и ваша мудрость поможет!
ОБНОВЛЕНИЕ
Моя ошибка состояла в том, что я экспортировал созданную тему и хук makeStyles из одного файла модуля.
Это сделало Mui вставкой темы <style>
после хука <style>
. Чтобы решить эту проблему и использовать реквизиты компонентов классов, как я хотел:
- экспортировать тему и перехватывать сообщения из отдельных модулей
- , убедитесь, что модуль темы не зависит от экспорта модуля перехват
- при использовании
ThemeProvider
убедитесь, что у него нет родительского компонента, импортирующего перехват
Я до сих пор не совсем понимаю, почему все работало, прежде чем я добавил свойство переопределения на хотя объект темы.