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

Question

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

我还有其他品牌元素，例如徽标、口号和术语，我将它们从数据库中提取出来，存储为 JSON 文件，并在网站周围引用，效果很好，但是问题是我需要在样式表中使用的颜色，因为我需要使用 CSS 提供的伪类。

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

到目前为止我已经...

导入包... npm install --save-dev postcss-import-json
创建了一个名为 'masterConfig.json'
使用我称为我的颜色（主要）的名称将上述文件导入到我的主样式表中... :root { @import-json "../Assets/MasterConfig/masterConfig.json" (primary); }
将以上颜色名称添加到我的颜色列表中... :root {primary: primary} 我还通过更改为 @import-json... (primary as primary prefix --)

--

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

对此有任何帮助，或任何其他实现此目的的方法都将非常有用，谢谢！

Answer 1

似乎有两个是访问您定义的变量，我已经用两种不同的方式完成了，您可以实现使您的代码更整洁的方式！

引用内联变量：

CSS

:root {
    --testcolor: red;
}

HTML

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

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

通过 class:

访问变量

CSS

:root {
    --testcolor: red;
}
.exampleClass {
    background: var(--testcolor);
}

HTML

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

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

Answer 2

所以，我很惊讶我不知道该怎么做，它看起来很简单，不需要任何额外的包。

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

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

:root {--primary: #123456;}

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

componentDidMount() {
const root = document.documentElement;

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

BooYaa!

How can I use colours stored in JSON in my CSS?