代码之家  ›  专栏  ›  技术社区  ›  Chris Murphy

Fulcro的CSS和ReaKit

  •  2
  • Chris Murphy  · 技术社区  · 6 年前

    看起来一样,但从文字上看是一样的。“按下主要”按钮的文本应为白色,背景应为红色。我做错什么了?

    (ns applets.reakit-test.core
      (:require [fulcro.client :as fc]
                [fulcro.incubator.ui.reakit :as rk]
                [fulcro.client.primitives :as prim :refer [defsc]]
                [fulcro-css.css-injection :as injection]
                [fulcro.client.dom :as dom]))
    
    (def red "#FF0000")
    
    (defsc PrimaryButton [_ {:keys [text]}]
      {:query         [:text]
       :initial-state (fn [p] {:text p})
       :css           [[:.primary
                        {:background-color red
                         :border           "none"
                         :color            "white"}]]}
      (rk/button :.primary text))
    (def primary-button-ui (prim/factory PrimaryButton))
    
    (defsc Experiment [_ {:keys [but-primary]}]
      {:query         [:but-primary (prim/get-query PrimaryButton)]
       :ident         (fn [] [:experiment/by-id :singleton])
       :initial-state {:but-primary (prim/get-initial-state PrimaryButton "Press primary")}
       :css           [[:.container
                        {:margin "10px"}]
                       [:.head
                        {:color       "#222"
                         :font-weight "bold"}]
                       [:.copy
                        {:color red}]]}
      (dom/div
        (rk/card :.container
                 (rk/heading :.head {:as "h3"} "Card Heading")
                 (rk/image {:src "https://placekitten.com/180/300" :alt "Kitten" :width 180 :height 300})
                 (rk/paragraph :.copy "Description for the card")
                 (rk/shadow))
        (dom/div
          (rk/button "Ordinary button")
          (primary-button-ui but-primary))))
    
    (def experiment-ui (prim/factory Experiment))
    
    (defsc ReakitTestRoot [this {:keys [application ui/react-key]}]
      {:query         [:ui/react-key {:application (prim/get-query Experiment)}]
       :initial-state (fn [_] {:application (prim/get-initial-state Experiment nil)
                               :ui/react-key "initial"})}
      (dom/div {:key react-key}
               (injection/style-element {:component this
                                         :react-key react-key})
               (experiment-ui application)))
    
    (defonce app (atom nil))
    
    (defn mount []
      (reset! app (fc/mount @app ReakitTestRoot "app")))
    
    (defn ^:export init [_]
      (reset! app (fc/new-fulcro-client
                    :reconciler-options {:render-mode :keyframe}))
      (mount))
    

    Unfortunately the two buttons at the bottom look the same

    1 回复  |  直到 5 年前
        1
  •  2
  •   T van der K.    6 年前

    您在组件中的查询 Experiment [{:but-primary (prim/get-query PrimaryButton)}]