来自Fulcro的CSS和ReaKit

Question

我在Fulcro“2.6.0-RC8”中写了一个小实验应用程序。如果你运行它，你会看到小猫图片下方的写作 - “卡的描述”是红色的。这很好 - 事情正在发挥作用。然而，小猫照片下方的两个按钮看起来不一样，但看起来与文字完全相同。 “按主要”按钮的文本应为白色，背景应为红色。我究竟做错了什么？

(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))

Answer 1

您在组件Experiment中的查询是错误的。它应该是一个加入：[{:but-primary (prim/get-query PrimaryButton)}]