如何在我的 CSS 中使用存储在 JSON 中的颜色？

Posted 2023-03-06

【中文标题】如何在我的 CSS 中使用存储在 JSON 中的颜色？

【英文标题】：How can I use colours stored in JSON in my CSS?

【发布时间】：2020-01-16 18:42:36

【问题描述】：

我需要从数据库中获取一些颜色值并在我的 CSS 中使用它们，以便每个客户都拥有我的 React.js 应用程序的颜色品牌版本，但我不确定如何。

我还有其他品牌元素，例如徽标、标语和术语，我将它们从数据库中提取出来，存储为 JSON 文件，并在网站周围进行引用，这些都可以正常工作，但问题是我使用的颜色需要在我的样式表中使用，因为我需要使用 CSS 提供的伪类。

我发现这个声称可以做到这一点的postcss-import-json 包，但我似乎无法让它按预期工作。

到目前为止，我已经...

已导入包... npm install --save-dev postcss-import-json

创建了一个名为“masterConfig.json”的 JSON 文件

使用我称之为颜色（主要）的名称将上述文件导入到我的主样式表中... :root @import-json "../Assets/MasterConfig/masterConfig.json" (primary);

将上述颜色名称添加到我的颜色列表中... :root primary: primary 我也尝试使用 -- 前缀更改为 @import-json... (primary as primary prefix --)

...并将其添加到我要使用的代码中... style=background: "var(--primary)" ^^^ 带和不带前缀

我做错了吗？ 我注意到在示例中它使用了$ 符号，那么它只能与 SCSS 一起使用吗？

对此的任何帮助，或任何其他方式来实现这一点都会很棒，谢谢！

【参考方案1】：

所以，我很惊讶我还不知道如何做到这一点，它看起来很简单，不需要任何额外的包。

要从 javascript 代码更改 CSS 变量，只需像往常一样定位根元素，然后设置属性！

CSS

---

创建一个变量（我使用的是备用颜色）

:root --primary: #123456;

JavaScript

---

我正在使用 React，并将这是我的 App.js componentDidMount 函数设置为我的应用程序是全局的。我已经对颜色进行了硬编码，但这可以从数据库中提取。

componentDidMount() 
const root = document.documentElement;

root.style.setProperty('--primary', '#CCCC00');

嘘！

【参考方案2】：

似乎有两种方法是访问您定义的变量，我以两种不同的方式完成了它，您可以实现使您的代码更整洁的任何一种方式！

内联引用变量：

CSS

:root 
    --testcolor: red;

HTML

<div style="background:var(--testcolor)">
    Many words
</div>

JS Fiddle 中的工作产品示例：https://jsfiddle.net/ta37nzer/

通过类访问变量：

CSS

:root 
    --testcolor: red;

.exampleClass 
    background: var(--testcolor);

HTML

<div class="exampleClass">
    Many words
</div>

JS Fiddle 中的工作产品示例：https://jsfiddle.net/ta37nzer/1/

【讨论】：

感谢您的回复，但这并不能解决或回答我的问题。我知道如何设置和使用 CSS 变量，我的问题是如何从 JavaScript 代码以编程方式更改 CSS 变量。无论如何，如果有人遇到这个问题，请参阅我的答案以获取有关如何操作的详细信息。