Какие темы, когда речь заходит о пользовательском интерфейсе материалов?

Вы можете (опционально) создать свою собственную тему через createMuiTheme. Эти темы и их переменные (цвета, значения по умолчанию, расстояния или все, что вы пожелаете) могут быть доступны в ваших стилях, которые вы добавляете в свои стили через аргумент темы.

Великолепные вещи, например, с одинаковыми отступами или полями.

Документация Material-UI охватывает это довольно подробно, но есть несколько разных частей документации, необходимых для понимания кода, который вы разместили.

• https://material-ui.com/customization/themes/
  • Это основная документация по темам
  [1112 ]
• https://material-ui.com/customization/css-in-js/
  • Вам необходимо понять, как работают аспекты CSS-in-JS, чтобы понять, как переменная styles будет использоваться
• https://material-ui.com/customization/css-in-js/#withstyles-styles-options-higher- Компонент порядка
  • В частности, функция withStyles - это то, что обычно принимает переменную styles в качестве параметра, а затем заботится о введении темы.
• https://material-ui.com/customization/themes/#createmuitheme-options-theme
  • В этой части описывается создание темы. [1135 ]
• https://material-ui.com/customization/themes/#muithemeprovider
  • Здесь описывается, как предоставить пользовательскую тему для вашего приложения (которая затем будет автоматически добавляться в случае необходимости Material-UI при использовании его компонентов или методов, таких как withStyles), но Material-UI автоматически предоставляет тему по умолчанию, которая используется, если вы не предоставили пользовательскую тему.

Что касается того, почему используется тема, то в документации описывается этот вопрос, но одним из вариантов использования является управление цветовыми схемами. Например, если у вас мультитенантное приложение (одна кодовая база используется для нескольких клиентов), вы можете захотеть использовать цвета, характерные для каждого клиента. Темы позволяют динамически изменять цвета, шрифты и другие аспекты внешнего вида, просто предоставляя другую тему в корне вашего приложения. В конкретном примере, который вы опубликовали, тема используется для добавления CSS-кода для внешнего вида панелей инструментов, которые включены в стандартную тему Material-UI, но которые могут быть переопределены в пользовательской теме.

Вот код Material-UI, который отвечает за настройки по умолчанию для theme.mixins.toolbar: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/ src / styles / createMixins.js

А вот соответствующая выдержка из этого кода:

toolbar: {
      minHeight: 56,
      [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
        minHeight: 48,
      },
      [breakpoints.up('sm')]: {
        minHeight: 64,
      },
    }