A minimalistic ClojureScript interface to React.js
Nikolas Pafitis 2021-02-14T20:11:00.061Z

Hey guys can anyone help me out with reagent-forms?

West 2021-02-14T22:24:08.062500Z

How does one inject styles for the root of the dom? I figured out how to style components, but not the dom itself.

West 2021-02-16T10:51:37.065100Z

( js/document "background: blue;") I feel like I’m doing something wrong here.

West 2021-02-16T11:10:08.065400Z

How can I do this in ClojureScript?

p-himik 2021-02-16T11:19:49.065600Z

You need to use set!. Check out the "JavaScript Interop" section of this cheatsheet:


You may want to look into a lib to do this. I am partial to emotion:!/dv.cljs_emotion.devcards/global-styles

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..

marek-sed 2021-02-25T09:54:21.022500Z

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.

p-himik 2021-02-14T22:26:30.062600Z

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.

p-himik 2021-02-14T22:28:02.062800Z

Oh, apparently there's also the :root selector. But it's identical to html in the vast majority of cases.

West 2021-02-14T22:32:16.063100Z

Ok, because I’m trying to get styles to change for the whole page. Like the background for example.

p-himik 2021-02-14T22:35:07.063500Z

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: = "background: blue;" I'm sure there's some fancy React component for that that doesn't have any proper view but that just mutates for you.

West 2021-02-14T22:36:05.063700Z

Yeah, because eventually I’m gonna mutate the state to add light/dark mode support.