Как смоделировать пользовательский интерфейс Material "theme.mixins.toolbar" с помощью SASS - PullRequest
Новая
       82

Как смоделировать пользовательский интерфейс Material "theme.mixins.toolbar" с помощью SASS

2 голосов
/ 04 октября 2019

Довольно простой вопрос здесь. Я был в кроличьей норе Mui / React / Scss, пытаясь найти простые ответы на вопрос о стилях компонентов Mui с использованием SASS и без использования JSS, тем, со стилями и т. Д. Этотребование клиента.

В настоящее время я пытаюсь найти обходной путь SCSS для стиля "theme.mixins.toolbar", чтобы предотвратить наложение различных компонентов макета и т. д. Я использую гриды, но у меня все еще естьВопросы.

Извините, если об этом уже спрашивали, и заранее благодарю за вашу помощь.

1 Ответ

1 голос
/ 04 октября 2019

Отправной точкой для выяснения этого является рассмотрение того, где миксин используется в Material-UI. Я считаю, что это только в Toolbar. Он также используется в нескольких демонстрационных версиях других компонентов, таких как Drawer, но я думаю, что Toolbar - это единственное место в самой библиотеке, где оно используется.

Вы также можете посмотреть исходный код для сам миксин , который выглядит следующим образом: 

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

Демо Отзывчивый ящик - это одно демо, которое использует миксин в нескольких местах. Исходный код демонстрации можно посмотреть здесь: https://codesandbox.io/s/v66pl.

Вы можете посмотреть на стили в элементе <head> в этой демонстрации и найти, что генерируется для MuiToolbar. В частности, класс regular использует тот, который использует миксин.

Вот сгенерированный CSS: 

.MuiToolbar-regular {
  min-height: 56px;
}
@media (min-width:0px) and (orientation: landscape) {
  .MuiToolbar-regular {
    min-height: 48px;
  }
}
@media (min-width:600px) {
  .MuiToolbar-regular {
    min-height: 64px;
  }
}

Чтобы использовать этот CSS без использования темы, просто скопируйте этот CSS вВаш файл SCSS с другим именем класса: 

.plain-css-mui-toolbar-mixin {
  min-height: 56px;
}
@media (min-width: 0px) and (orientation: landscape) {
  .plain-css-mui-toolbar-mixin {
    min-height: 48px;
  }
}
@media (min-width: 600px) {
  .plain-css-mui-toolbar-mixin {
    min-height: 64px;
  }
}

Затем используйте его в соответствующих местах. Вы можете увидеть это в моей измененной версии демоверсии отзывчивого ящика: https://codesandbox.io/s/toolbar-mixin-3l58u

...