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.

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

[:div "Hello from " @name "]

Would be nice if I could do something like this:

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

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

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

thanks!

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

Yep

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

or add them them to project.clj?

or to public/index.html?

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

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.

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

maybe I should have scaffolded it with +less

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

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

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

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

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 🙂

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

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