Как создать глобальный стиль в React

Question

Я работаю над проектом для школы, где можно создавать элементы HTML с помощью Selection.js (визуальный выбор превращается в элемент HTML). В настоящее время пользователь может писать CSS в редакторе CodeMirror. После того, как пользователь применяет CSS, нажимая кнопку, стили непосредственно вставляются в созданные впадины React компонента.

Моя главная цель - позволить пользователю создавать несколько элементов с несколькими правилами стиля, чтобы затем (в конце концов) экспортировать созданные элементы вместе с их стилем.

Я импортировал JSS из-за createStyleSheet функция, которая генерирует стили на основе CSS-объекта JavaScript (который поступает из входных данных 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 {...}без уникальных идентификаторов.

Я искал через JSS API, но, похоже, нет доступного логического значения для переключения генерации уникального идентификатора.

Есть ли лучший способ достижения моей цели?

Заранее спасибо!

Answer 1

Самый простой способ иметь классы JSS без идентификатора - сделать его "глобальным" стилем. Это значит, что у нас есть глобальные стили CSS, которые не привязаны индивидуально к элементам. Вместо того, чтобы просто ставить / устанавливать HTML className без реального использования результата JSS. Они называют это "Глобальные селекторы" в разделе "Плагин" на своих страницах документации.

Вы можете найти документацию здесь: https://cssinjs.org/jss-plugin-global?v=v10.0.0-alpha.7