Garden 在 Reagent's Hiccup 中生成内联样式

Question

在试剂中，可以像这样指定内联 CSS 样式：

[:div {:style {:border "1px solid red"}} "My Text"]

花园可以使包含列表中多个值的此类 CSS 属性更加通用。逗号分隔列表的向量和空格分隔列表的嵌套向量（此处使用）：

(require '[garden.core :refer [style]])

(style {:border [[:1px :solid :black]]})
;= "border: 1px solid red;"

如何将这些东西结合起来？试剂似乎很固执，只接受样式属性的哈希映射。在这里接受一个字符串也是一个解决方案。

一般来说，从长远来看，内联样式不是一个好的选择。因此，可以通过将类附加到div并通过花园css函数全局指定其样式来解决该问题。

类示例：

[:div.myclass "My Text"]

(css [:.myclass {:border [[:1px :solid :black]]}])
;= ".myclass {\n  border: 1px solid black;\n}"

然而，有时从内联样式开始是很好的，所以：有没有办法按照上面描述的方式做到这一点？

Answer 1

可以选择提供给试剂的打嗝向量的哈希映射基本上是对指定 html 元素的 HTML 属性的抽象。（正如它们在 DOM 中所表示的那样）此外，当附加到关键字 时，可以嵌套另一个哈希映射:style。这是元素样式属性的抽象。这与上面的不同。出于这个原因，人们可能会说这两件事最好分开，但以另一种方式来说更简单。

通过设置元素的样式属性来操作元素的样式属性意味着，当只有一部分发生更改时，必须解析整个样式字符串。因此，在打嗝中提供样式字符串的额外选项并没有多大帮助。

看起来花园只能渲染为字符串。我建议如果它也能渲染到哈希映射，它可能会有帮助。

然而，这里有一个解决方法，可以让试剂和花园一起工作：

(defn css-map [s]
  (->> (style s)
       (re-seq #"(.*): (.*);(?:\n|$)")
       (reduce (fn [m [_ k v]]
                 (assoc m k v))
               {})))

(css-map {:border [[:1px :solid :red]]
          :background-color (rgb 33 5 0)})
;= {"border" "1px solid red", "background-color" "#210500"}

当然，性能会受到影响。如果有人知道更好的解决方案，我仍然很想知道。