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

Question

Я пытаюсь понять, что это за темы и что они пытаются изобразить. Я прочитал документы, но это все еще не имеет смысла для меня.

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

Я просто хочу знать, что theme должно представлять, откуда оно и почему оно используется.

const styles = theme => ({
root: {
    display: 'flex',
},

toolbar: {
    paddingRight: 24, // keep right padding when drawer closed
},

toolbarIcon: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: '0 8px',
    ...theme.mixins.toolbar,
},
});

Answer 1

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

• https://material -ui.com / настройки / темы /
  • Это основная документация по темам
• https://material -ui.com / настройка / CSS-в-JS /
  • Вам необходимо понять, как работают аспекты CSS-in-JS, чтобы понять, как будет использоваться переменная styles
• https://material -ui.com / настройки / CSS-в-JS / # withstyles-стили-параметры-высший порядок-компонент
  • В частности, функция withStyles - это то, что обычно принимает переменную styles в качестве параметра, а затем заботится о введении темы.
• https://material -ui.com / настройки / темы / # createmuitheme-опции-тема
  • Эта часть описывает создание темы.
• https://material -ui.com / настройки / темы / # 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,
      },
    }

Answer 2

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