5

在试剂中，可以像这样指定内联 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}"

但是，有时最好从内联样式开始，所以：有没有办法按照上面描述的方式来做？

4

3 回答 3

2

可以选择提供给试剂的打嗝向量的哈希映射基本上是对指定 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"}

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

于 2016-05-09T14:28:28.623 回答
0

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

(def button-style {:padding "25px"
                   :background-color "#BBBBBB"
                   :border "1px solid black"})
(defn- button [text]
   [:div (use-style button-style)
      text])
于 2018-12-30T06:47:05.560 回答
0

正如 ClojureMostly 所建议的那样，我正在使用gardenwith 。goog.style/installSafeStyleSheet

我也在玩生成范围 css，目前使用(random-uuid). 如果我让它工作得很好，我会更新这个答案。

(ns stuff
  (:require
    [goog.dom :as gdom]
    [goog.style :as gstyle]
    [garden.core :refer [css]])
  (:import [goog.html SafeStyleSheet]
           [goog.string Const]))

(defn install-styles! []
 (gstyle/installSafeStyleSheet
  (SafeStyleSheet/fromConstant
   (Const/from
    (css [:.someclass {:color 'red}])))))

(def ref-to-installed-style (install-styles!))

(defn app []
 [:h1.someclass "Red Hello world!"])

;; Reagent and Figwheel stuff. On figwheel reload, call
;; (gstyle/uninstallStyles ref-to-installed-style), and then
;; install it again, to avoid duplication.

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

于 2020-08-16T03:24:17.370 回答