Fork me on GitHub
#reagent
<
2018-01-29
>
derpocious00:01:26

Hey all, this is probably a very noob question, but I'm wondering the best way to add a css class to a div in reagent.

derpocious00:01:40

I just created a project with "lein new re-frame my-project", and now I want to style my div. I don't yet have any css files in my project, but I'm thinking I could just add the css file and then change this part where the div is being rendered

derpocious00:01:54

[:div "Hello from " @name "]

derpocious00:01:17

Would be nice if I could do something like this:

derpocious00:01:44

[:div :class="cool-style" "Hello from " @name "]

shaun-mahood00:01:50

[:div.cool-style "Hello from " @name]

shaun-mahood00:01:47

[:div.cool-style1.cool-style2 {:style {:color "red"}} "really cool styles that are now red"]

derpocious00:01:49

is {:style {:color "red"}} like using inline styles in html?

derpocious00:01:23

cool! do I need to somehow add my css files to the :require at the top of my view files?

derpocious00:01:40

or add them them to project.clj?

derpocious00:01:58

or to public/index.html?

derpocious00:01:26

should I put css files right in public/css/?

justinlee00:01:31

I don’t quite remember how re-frame structures its project (there is a #re-frame channel if you are committed to that framework), but I’m pretty sure that you can just include your css file in the index.html. if you want to just use reagent, you can use the reagent template (https://github.com/reagent-project/reagent-template) and then you can stick your css in resources/public/html/css (I think). that template also allows you to install sass or less if you prefer.

derpocious00:01:58

thanks. I was under the impression that the "re-frame" lein starter is basically reagent plus their bit about state

derpocious00:01:17

maybe I should have scaffolded it with +less

justinlee00:01:21

yes it is but each template lays out the server side a bit differently

derpocious00:01:10

I put the css in resources/public/css and then added it to the index.html

derpocious00:01:13

<link rel="stylesheet" href="./css/styles.css">

derpocious00:01:29

that's working for me! would nice to have css automatically picked up though 🙂

justinlee00:01:48

somehow i have that working on my template but of course i’ve forgotten how it’s done. why this stuff isn’t automatic is beyond me 🙂

blake23:01:59

I'm trying to do something after the component is rendered. I tried just adding r/after-render to this but it didn't work (the after-render function is called, but it's called before the render-component is done): (defn mountit [] (r/render-component [spreadsheet-table] @page))

blake23:01:17

So: (defn mountit [] (r/render-component [spreadsheet-table] @page) (r/after-render lock-fields)) <-That calls "lock-fields" while "spreadsheet-table" is still running.