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