This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-02-14
Channels
- # adventofcode (4)
- # announcements (11)
- # babashka (1)
- # beginners (45)
- # calva (31)
- # cider (12)
- # clj-kondo (1)
- # cljdoc (9)
- # cljs-dev (5)
- # cljsrn (11)
- # clojure (42)
- # clojure-australia (1)
- # clojure-germany (14)
- # clojure-italy (1)
- # clojurescript (20)
- # conjure (2)
- # cursive (11)
- # datomic (5)
- # emacs (2)
- # events (1)
- # fulcro (24)
- # graalvm (1)
- # honeysql (69)
- # malli (2)
- # off-topic (13)
- # reagent (12)
- # reitit (1)
- # shadow-cljs (14)
- # specter (2)
- # tools-deps (21)
- # uncomplicate (4)
Hey guys can anyone help me out with reagent-forms?
How does one inject styles for the root of the dom? I figured out how to style components, but not the dom itself.
Not sure what you mean by the "root of the dom".
You can use html
in a CSS selector, you can use body
.
Since React touches neither body
nor html
, you cannot do it via React. You can do it jQuery-style by just mutating a DOM reference directly. Or you can statically provide styles in your HTML template or top-level Hiccup or whatever you're using to render the initial HTML page.
Oh, apparently there's also the :root
selector. But it's identical to html
in the vast majority of cases.
Ok, because I’m trying to get styles to change for the whole page. Like the background for example.
If it needs to be dynamic and needs to be attached to body
or html
then you will have to assign the value like so: document.body.style = "background: blue;"
I'm sure there's some fancy React component for that that doesn't have any proper view but that just mutates document.body.style
for you.
(.body.style js/document "background: blue;")
I feel like I’m doing something wrong here.
You need to use set!
. Check out the "JavaScript Interop" section of this cheatsheet: https://cljs.info/cheatsheet/
You may want to look into a lib to do this. I am partial to emotion: https://dvingo.github.io/cljs-emotion/#!/dv.cljs_emotion.devcards/global-styles https://github.com/dvingo/cljs-emotion
defn home-page []
[:div {:class ["m-6" "p-6" "bg-gray-700" "text-gray-200"]}
;; styles are injected when this component renders, and removed on unmount
(global-style {"body" {:background "blue"}})
;; elided..
])