如何在 React 中创建全局样式答案

【问题标题】：How to create a global style in React如何在 React 中创建全局样式
【发布时间】：2019-06-07 17:13:03
【问题描述】：

我正在为学校开发一个项目，可以使用Selection.js 创建 HTML 元素（视觉选择变成 HTML 元素）。目前，用户可以在CodeMirror 编辑器中编写 CSS。用户通过点击按钮应用 CSS 后，样式直接通过 props 插入到创建的 React 组件上。

我的主要目标是允许用户创建具有多个样式规则的多个元素，然后（最终）导出创建的元素及其样式。

我已经导入了 JSS，因为 createStyleSheet 函数根据 JavaScript CSS 对象（来自 CodeMirror 输入）生成样式，并且因为直接注入的样式槽道具不是可重用（因为它不包含类，只包含属性）。 JSS 的问题在于它以.mySpecialClass-0-1 {...} 的形式生成样式

这是我在用户应用样式（点击时）时使用的代码。

 onStyleInput(e) {
        e.preventDefault();
        try {
            let style= cssToObject(this.codeMirror.getValue(), {camelCase: true});
            this.styleSheet = jss.createStyleSheet(style, {link: true}).attach();
            console.log(this.styleSheet);
        }
        catch (exception) {
            // console.log("Something went wrong, check your css syntax");
            console.log(exception);
        }
    }

我对 JSS 的预期结果是以 .mySpecialClass {...} 的形式进行样式设置，没有唯一的 id。

我一直在查看 JSS API，但似乎没有可用的布尔值来切换唯一 ID 生成。

有没有更好的方法来实现我的目标？

提前致谢！

【问题讨论】：

标签： css reactjs jss

【解决方案1】：

让 JSS 类没有 ID 的最简单方法是将其设为“全局”样式。这意味着，我们有全局 CSS 样式，它们没有单独附加到元素上。而不是在没有真正利用 JSS 结果的情况下放置/设置 HTML className。他们在文档页面的“插件”部分将其称为“全局选择器”。

您可以在此处找到文档：https://cssinjs.org/jss-plugin-global?v=v10.0.0-alpha.7

【讨论】：