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

Posted

技术标签:

【中文标题】如何在我的 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 变量。无论如何,如果有人遇到这个问题,请参阅我的答案以获取有关如何操作的详细信息。

以上是关于如何在我的 CSS 中使用存储在 JSON 中的颜色?的主要内容,如果未能解决你的问题,请参考以下文章

检索存储在我的 Mlab 中的音频 - 二进制文件

如何在我的反应项目中使用 package.json 依赖项中的系统变量?

如何存储多个 JSON 数组的项目并显示它的列表视图?

如何从 Vapor 3 中的 JSON 响应中保存父子关系

在 Flutter 应用程序中存储 API 凭据

如何使用 html 中的 url 访问存储在我的 s3 存储桶中的图像