在PrimeReact中覆盖SCSS变量

Question

如何从primereact中覆盖一些默认值，例如原色？

我了解到我必须在允许的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. 使用例如编译您自己的 .scss 文件节点sass

您自己的 .scss 文件示例

@import "node_modules/path_to_the_libaries_scss_file.scss";

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