Clojurians Log v2
reagent
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.
(.body.style js/document "background: blue;")
I feel like I’m doing something wrong here.
How can I do this in ClojureScript?
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..
])
Simple answer to this should be you add css file to index.html file with your defaults as you would do in react. Same as in react. Btw are you using tailwindcss, if so then in should be in their library were you set default global variables.
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.
Yeah, because eventually I’m gonna mutate the state to add light/dark mode support.