clojure - 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"}

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