不
看起来一样,但从文字上看是一样的。“按下主要”按钮的文本应为白色,背景应为红色。我做错什么了?
(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))