在 PrimeReact 中覆盖 SCSS 变量答案

【问题标题】：Override SCSS variables in PrimeReact在 PrimeReact 中覆盖 SCSS 变量
【发布时间】：2020-07-23 11:41:09
【问题描述】：

如何覆盖 Primereact 中的一些默认值，例如原色？

我读到我必须通过在提供的 override.scss 中添加以下代码来覆盖这些值

:root {
  --primaryColor: green;
  --primaryTextColor: #ffffff;
  --panelContentBorder: 1px solid #c8c8c8;
}

不幸的是，我的更改在使用例如时没有应用。一个按钮类（使用原色）。我还读到覆盖必须发生在在实际类被创建之前。

我该怎么做？我需要运行 SCSS 命令吗？

【问题讨论】：

标签： reactjs sass primereact

【解决方案1】：

一般来说，要覆盖 SCSS/SASS/LESS 变量，您可以执行以下操作（该过程也可以使用 less 而不是 .scss）

创建一个新的 .scss 文件
而不是直接包含框架（无论您使用哪一个）.scss 包含您自己创建的 .scss 文件（步骤 1）
将框架的 .scss 文件导入您自己的自定义 .scss 文件中
使用例如编译您自己的 .scss 文件。节点萨斯

您自己的 .scss 文件示例

@import "node_modules/path_to_the_libaries_scss_file.scss";

// Overwrite colors like this:
$primary-color: #ff5b00;

【讨论】：

【解决方案2】：

您可以为一些更具体的规则覆盖变量

例如

:root {
  --primaryColor: green;
  --primaryTextColor: #ffffff;
  --panelContentBorder: 1px solid #c8c8c8;
}

.somePage {
  --primaryColor: blue;
  // So primaryColor will be blue for all rules in scope of .somePage
}

【讨论】：

【解决方案3】：

在我的记忆中，您可以覆盖 overrides/_layout_variables.scss 或 overrides/_theme_variables.scss 文件中的变量。此外，您可能需要将您的版本升级到最新版本。

【讨论】：

让我检查一下我以前的项目。同时，您可以使用 !important 吗？