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.

score 7 · Accepted Answer · answered Dec 09 '14 at 07:42

7

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

answered Dec 09 '14 at 07:42

David J.

31,569
22
122
174

You don't have to write `px` units explicitly. Sometimes it's handy. – Aleš Roubíček Dec 10 '14 at 07:11
ie, Om expects the style as a (javascript) map, not a string. – prabhasp Apr 19 '15 at 03:51

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

1 Answers1