Как создать глобальный стиль в React - PullRequest
Новая
       10

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

0 голосов
/ 13 января 2019

Я работаю над проектом для школы, где можно создавать элементы HTML с помощью Selection.js (визуальный отбор превращается в элемент HTML). В настоящее время пользователь может писать CSS в редакторе CodeMirror . После того, как пользователь применяет 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 {...} без уникальных идентификаторов.

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

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

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

1 Ответ

0 голосов
/ 13 января 2019

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

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

...