Получение статического CSS из компонентов React в ClojureScript

Question

Я играл и думал об использовании React через его различные абстракции в ClojureScript, Reagent, Rum, Re-frame и Om. Но есть одна вещь, в которой я не уверен, что любой из них адресован, возможно, потому, что это отдельная проблема в зависимости от того, как на это смотреть, и это эффективно включает стилизацию в компонентах. Хотя вполне возможно, что я что-то упустил из виду, но на настоящий вопрос:

Есть ли какой-нибудь способ, чтобы статические части стилей, переданные React, компилировались для классов CSS компонента вместо того, чтобы быть встроенными в каждом экземпляре компонента?

Время для примера! Давайте возьмем список, в котором каждый элемент должен быть оформлен определенным образом:

[:ul
 (for [i (range 3)]
   [:li {:style {:background-color (str "rgba(0, 0, " (* i 70) ", 255)")
                 :color "lightgrey"}}
    i])]

Используя Реагент, вышеупомянутый Иккинг будет представлен как:

<ul>
  <li style="background-color: rgb(0, 0, 0); color: lightgrey;">0</li>
  <li style="background-color: rgb(0, 0, 70); color: lightgrey;">1</li>
  <li style="background-color: rgb(0, 0, 140); color: lightgrey;">2</li>
</ul>

Как мы видим, определяющее правило правило может быть выделено в правило класса CSS с этим классом, прикрепленным к элементу. В этом конкретном случае разница в размере HTML не будет значительной, но каждое правило или экземпляр компонента увеличивает разрыв.

Итак, подведу итог: мне нравится идея хранить все, что связано с компонентом внутри этого компонента, включая стиль; Я просто не люблю вставлять и повторять то, что не должно повторяться. А со стилями, объявленными в структурах данных Clojure, можно манипулировать ими, используя базовую библиотеку Clojure, что приятно.

Answer 1

Если вы используете Om Next, вы можете использовать библиотеку fulcro-css. Вот пример компонента, скопированного прямо по ссылке:

(defui ListItem
  static css/CSS
  (local-rules [this] [[:.item {:font-weight "bold"}]])
  (include-children [this] [])
  Object
  (render [this]
    (let [{:keys [label]} (om/props this)
          {:keys [item]} (css/get-classnames ListItem)]
      (dom/li #js {:className item} label))))  

, что приведет к следующему CSS:

<style id="my-css">
.fulcro-css_cards-ui_ListItem__item {
  font-weight: bold;
}
</style>

Это будет сгенерированный DOM, если родитель ListItem предоставил список без подписи (<ul>) содержащий два ListItems:

<ul>
  <li class="fulcro-css_cards-ui_ListItem__item">A</li>
  <li class="fulcro-css_cards-ui_ListItem__item">B</li>
</ul>

Таким образом, стиль сохраняется внутри компонента и превращается в классы CSS, что позволяет избежать встраивания повторений.

Здесь оба A а также B будет отображаться жирным шрифтом.