如何在 React 中创建全局样式

Question

我正在为学校开展一个项目，其中可以使用 Selection.js (visual selection turns into an HTML element). Currently, the user is able to write CSS in a CodeMirror 编辑器创建 HTML 元素。用户通过单击按钮应用 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 生成。

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

提前致谢！

Answer 1

让 JSS 类没有 ID 的最简单方法是，将其设为 "Global" 样式。这意味着，我们有全局 CSS 样式，这些样式没有单独附加到元素上。而不仅仅是 put/set HTML className 而不是真正利用 JSS 结果。他们在文档页面的 "plugin" 部分将其称为 "Global selectors"。

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

如何在 React 中创建全局样式

How to create a global style in React

css

reactjs

jss