在试剂中,可以像这样指定内联 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 似乎固执地只接受样式属性的哈希映射。接受一个字符串也是一个解决方案。
一般来说,从长远来看,内联样式并不是一个好的选择。因此,可以通过将一个类附加到 thediv
并通过 gardenscss
函数全局指定其样式来解决这个问题。
类示例:
[:div.myclass "My Text"]
(css [:.myclass {:border [[:1px :solid :black]]}])
;= ".myclass {\n border: 1px solid black;\n}"
但是,有时最好从内联样式开始,所以:有没有办法按照上面描述的方式来做?