Search code examples
reactjsclojurescriptinline-stylesom

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

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.

Solution

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