Пользовательский интерфейс материала: изменение цвета темы с помощью переменных SASS

Question

Я знаю, что мы можем редактировать тему пользовательского интерфейса материала (https://material -ui.com / customization / themes / ), но я думал о том, чтобы сделать его динамичным, где мы можем установить переменные SASS, и он автоматически обновит тему Material UI.

Я использую sass для разработки своей страницы, и вот пример переменных, которые я использую:

$primary-color: #1E79C7;
$secondary-color: #E5681A;

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

.app-button-blue {
  background-color: $primary-color !important; 
  margin: 5px;
}

.app-button-gray {
  background: transparent !important;
  box-shadow: none !important;
}

.app-button-white {
  background: transparent !important;
  box-shadow: none !important;
  border: $primary-color solid 1px !important;
}

Можно ли использовать эти переменные SASS при перезаписи темы материала, например, установки основного и дополнительного цветов?

Answer 1

Material UI использует решение на основе стиля Javascript (JSS) вместо препроцессора CSS, такого как SCSS (см. решение для стиля ).

Это означает, что невозможно настроить материалТема пользовательского интерфейса через переменные SCSS.Также невозможно получить доступ к теме в ваших стилях CSS / SCSS.

Если вы хотите использовать SCSS для стилизации / создания тем, вы можете вместо этого рассмотреть Материал веб-компонентов .