Using inline style string with ClojureScript, Om, and React.js

Question

I want to use this Om snippet in my ClojureScript application:

    (dom/img
     #js {:className "img-circle"
          :src "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
          :style "width: 140px; height 140px;"
          :alt "Generic Placeholder Image"})

This "blows up" and stops the entire rendering of the whole page!

I think the reason has to do with how React.js handles styles. According to Inline Styles:

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string

What are some good ways to get around this problem? I generally don't like to use inline styles, but I'd like to know how to make this example work.

Anarchist

Answer 1

I found an example in the Om source code, which led me to try this, which works:

    (dom/img
     #js {:className "img-circle"
          :src "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
          :style #js {:width "140px" :height "140px"}
          :alt "Generic Placeholder Image"})

Anarchist

You don't have to write px units explicitly. Sometimes it's handy. – Rheumy

ie, Om expects the style as a (javascript) map, not a string. – Frequency