reactjs - 在 PrimeReact 中覆盖 SCSS 变量

Question

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

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

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

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

我怎样才能做到这一点？我需要运行 SCSS 命令吗？

Answer 1

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

Answer 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
}

Answer 3

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

1. 创建一个新的 .scss 文件
2. 而不是直接包含框架（无论您使用哪一个）.scss 包含您自己创建的 .scss 文件（步骤 1）
3. 在您自己的自定义 .scss 文件中导入框架的 .scss 文件
4. 使用例如 node-sass 编译您自己的 .scss 文件

您自己的 .scss 文件示例

@import "node_modules/path_to_the_libaries_scss_file.scss";

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