从ClojureScript中的React组件派生静态CSS

Question

我一直在尝试并考虑通过ClojureScript、Reagent、Rum、Re-frame和Om中的各种抽象来使用React。但有一件事我不确定是否能解决，可能是因为这是一个单独的问题，取决于人们如何看待它，这就是有效地将样式包含在组件中。虽然这也完全有可能是我忽略的东西，但关于实际问题：

是否有某种方法可以将提供给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>

如果ListItem的父级呈现了包含两个ListItem的未签名列表(<ul>)，则这将是生成的DOM：

<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都将以粗体显示。