Question

我正在为一个学校项目工作，该项目可以使用Selection.js创建HTML元素（可视选择变成HTML元素）。当前，用户可以在CodeMirror编辑器中编写CSS。用户单击按钮应用CSS后，样式将直接插入到已创建的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

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

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

如何在React中创建全局样式

1 个答案: