时间戳

首页 > 解决方案 > Material UI：通过 SASS 变量更改主题颜色

reactjs - Material UI：通过 SASS 变量更改主题颜色

问题描述

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

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

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

目前对我来说，我为材料 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 变量来覆盖材料 ui 的主题 - 比如设置原色和次要颜色？

标签： reactjssassmaterial-uithemes

解决方案

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

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

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

推荐阅读