reactjs - Material 界面 : Change theme color by SASS variables

Question

我知道我们可以编辑material UI的主题但我正在考虑让它动态化，我们可以在其中设置 SASS 变量，它会自动更新 Material UI 主题。

我使用 sass 来设计我的页面，这里是我使用的变量示例:

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

目前对我来说，我对 Material ui 按钮执行以下操作，因为我希望我的设计尽可能多地放在一个地方

.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 变量来覆盖 Material ui 的主题——比如设置主色和辅助色？

Answer 1

Material UI 使用基于 javascript 的样式解决方案 (JSS)，而不是像 SCSS 这样的 CSS 预处理器(请参阅 style solution)。

这意味着无法通过 SCSS 变量自定义 Material UI 主题。也无法在您的 CSS/SCSS 样式中访问主题。

如果您想使用 SCSS 进行样式/主题化，您可以考虑 Material Web Components反而。