Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 655
David J. Avatar asked Dec 09 '14 07:12

David J.


People also ask

Can you inline style with React component?

React lets you use "inline styles" to style your components; inline styles in React are just JavaScript objects that you can render in an element's style attribute. The properties of these style objects are just like the CSS property, but they are camel case ( borderRadius ) instead of kebab-case ( border-radius ).

How do you apply inline style conditional in React?

Conditional Styling with Inline Styles Add the following code to your App. js: import { React, useState } from "react"; import "./App. css" function App() { const styles = { popup:{ display:"none", opacity:"0" } }; return ( <div className="main"> <button className="open_button">Open!

Does React support inline CSS?

React supports both inline and raw CSS by using a stylesheet file that can be achieved using various pre-processors like SCSS, CSS, SASS, and many more.


1 Answers

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"})
like image 115
David J. Avatar answered Nov 29 '22 14:11

David J.