возможно ли переопределить переопределение темы с помощью классов компонентов prop? - PullRequest
0 голосов
/ 14 февраля 2020

Мне интересно, есть ли хитрый способ использовать компонент 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 убедитесь, что у него нет родительского компонента, импортирующего перехват

Я до сих пор не совсем понимаю, почему все работало, прежде чем я добавил свойство переопределения на хотя объект темы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...