Is there a trick to getting style changes to show up in reagent? I built a cool little “Dynamic CSS” mockup for a project at work that sets the :style directly on individual elements based on @app-state, and now I want to build a non-work-specific demo, but the styles aren’t updating.

https://github.com/manutter51/mock-css in the “refactor2” branch

My presentation is this coming Tuesday 😕

I just now pushed an update to the refactor2 branch with some data-foo attributes on the header component, for debugging

My color changes propagate to the data-foo elements, but the style attribute on the page is stuck with the original colors.

Tested on 2 different machines, same behavior

you mean this style attribute? https://github.com/manutter51/mock-css/blob/refactor2/src/cljs/mock_css/core.cljs#L131

@manutter51: happy to help, but you'll need to make it a bit easier for us. You've branch has a lot of code in it. What exactly is the problem and where?

Awesome, thanks

The code I’m working on is the header component

starts around line 38 of mock-css/core.cljs

Firsy thing i see is derefs above an inner anonymous function

Those will only get derefed once because not in render phase

Ok

I moved them there in the process of trying to figure stuff out

@gadfly361: those derefs are in functions, so it depends when they are called

what I’m seeing is that the data-bg-color attributes are updating, but the style is not

(I’m using the “tweak” fn to update the app-state at the repl)

Ahh didnt look closely enough, youre right @mikethompson

So for example, I call (tweak :primary-bg-color “red”) and I can see :data-row-style update to “red” but :style stays at the original color.

Note: background-colour is the way you write styles in reagent, rather than backgroundColour

Ok, that’s how I had them originally, but that wasn’t working so I tried it the react way

Yep, I don't think that will be a problem, but just noting

After line 52, tuck this just inside your outside header [:div [:pre (pr-str (row-style))]

just btw for the Tuesday demo I’ve thrown together a simpler ToDoMVC-ish project to use as Plan B

That will allow you to see in rendered

so this is something I’d like to solve, but if I don’t, no biggie

I can see the results of (row-style) in the REPL, it’s returning the correct HTML with the updated style attributes

but when I use dev tools to inspect the element on the page, it shows the data-row-style attribute as updated, but the style attribute is unchanged.

I also see console log messages saying that the functions are being called like I expect.

I can't see a reason for that not working

That makes me feel better about my sanity

I have code that is very much like that in the mockup I made for work, and it’s working perfectly, styles update no problem.

I just fired it up again and ran (tweak :primary-bg-color “red”) which should change the header div to “red !important” as the background-color, but instead I get this: <div class="col-xs-12 header-panel" data-panel-style="{:backgroundImage &quot;url(\&quot;img/kids-racing.png\&quot;)&quot;, :backgroundColor &quot;red !important&quot;}” style="background-image:url(&quot;img/kids-racing.png&quot;);background-color:#37441e !important;" data-reactid=".0.0.0.0">

data-panel-style is showing a string dump of the results of the function call, and contains backgroundColor “red !important” as expected, but style still has background-color:#37441e

@manutter51: Just to be sure, have you tried doing a clean and rebuild (of both the clj and cljs)? I find that really odd inconsistencies can occasionally be solved that way (because eg stale JS).

Yeah, I’ve even gone as far as re-installing Node, deleting the target directory completely, deleting node_modules completely, even rebooting

:thumbsup:

Ok, I'm going to chalk this one up to the gods of mayhem, and just go with the ToDoMVC demo. No doubt the issue will spontaneously resolve itself on Wednesday.

Thanks for the input everyone.