在 PrimeReact 中覆盖 SCSS 变量

Posted 2023-02-22

【中文标题】在 PrimeReact 中覆盖 SCSS 变量

【英文标题】：Override SCSS variables in PrimeReact

【发布时间】：2020-07-23 11:41:09

【问题描述】：

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

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

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

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

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

【参考方案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 吗？