Emotion support for react-basic!
import React.Basic.DOM as R import React.Basic.Hooks as React import React.Basic.Emotion as E myUnstyledDiv :: JSX myUnstyledDiv = React.element R.div' { children: [ R.text "I have no style :(" ] } myStyledDiv :: JSX myStyledDiv = E.element R.div' { className: "stylish-div" , css: E.css { color: E.str "rebeccapurple" , padding: E.px 4 } } Note that you need to use the apostrophised variants of react components from React.Basic.DOM since these represent the raw ReactComponents that Emotion expects to work with.
Emotion allows you to define real CSS rules rather than only inline styles. Here's an example of something you can't do with inline styles:
myStyle :: Style myStyle = E.css { "&:hover": E.nested (E.css { background: E.str "#fed" }) }