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.
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 ).
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!
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.
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"})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With