在 PrimeReact 中覆盖 SCSS 变量

Question

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

我读到我必须通过在提供的 override.scss

中添加以下代码来覆盖这些值

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

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

我该怎么做？我需要运行 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）

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

您自己的 .scss 文件示例

@import "node_modules/path_to_the_libaries_scss_file.scss";

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

在 PrimeReact 中覆盖 SCSS 变量

Override SCSS variables in PrimeReact

reactjs

sass

primereact