Awesome

react-basic-emotion

Emotion support for react-basic!

<a href="https://pursuit.purescript.org/packages/purescript-react-basic-emotion"> <img src="https://pursuit.purescript.org/packages/purescript-react-basic-emotion/badge" alt="Fixed Precision on Pursuit"> </img> </a>

Example usage:

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.

Going beyond what style can give you

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