Question

在试剂中，可以指定内联CSS样式，如下所示：

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

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

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

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

这些事情如何结合起来？ Reagent似乎很顽固，只接受样式属性的哈希映射。接受一个字符串也是一个解决方案。

一般来说，内联风格从长远来看并不是一个好的选择。因此，可以通过将类附加到div并通过garden 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"}

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

Answer 2

看看stylefy。它允许您将定义为数据的样式附加到试剂组件：例如：

(def button-style {:padding "25px"
                   :background-color "#BBBBBB"
                   :border "1px solid black"})
(defn- button [text]
   [:div (use-style button-style)
      text])

Answer 3

根据ClojureMostly的建议，我将.and_then(move |form, my_sender| async move { Ok::<_, Infallible>(my_handlers::handler_2(form, my_sender).await) })与garden一起使用。

我还在玩生成作用域的CSS，目前使用goog.style/installSafeStyleSheet。如果我可以正常使用，我将更新此答案。

(random-uuid)

注意：如果在安装样式之前渲染组件，则这里可能存在错误。仍然不确定如何解决该问题。

在试剂的打嗝中产生花园生成的内联式

3 个答案: