如何在我的 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 中的颜色?的主要内容,如果未能解决你的问题,请参考以下文章