css

Question

我需要从数据库中获取一些颜色值并在我的 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 一起使用吗？

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

score 2 · Accepted Answer

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

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

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

:root {--primary: #123456;}

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

componentDidMount() {
const root = document.documentElement;

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

嘘！

score 0 · Accepted Answer

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

引用变量内联：

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 - 如何在我的 CSS 中使用存储在 JSON 中的颜色？