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.

David J. · Accepted Answer · 2014-12-09 07:42:59Z

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 9, 2014 at 7:42

David J.

32.9k24 gold badges131 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aleš Roubíček Over a year ago

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

prabhasp Over a year ago

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

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related