Introduction
A simple introduction to using server side CSS with ReScript, React and Emotion CSS.
ReScript version: bs-platform@8.3.3
NPM Packages
First install the packages we need.
npm i @emotion/css @emotion/server react react-dom reason-react
This example is using the following versions:
@emotion/css@11.0.0
@emotion/server@11.0.0
react@17.0.1
react-dom@17.0.1
reason-react@0.9.1
Update bsconfig.json
Add reason-react to bs-dependencies:
"bs-dependencies": ["reason-react"],
Create the Emotion bindings
In a file Emotion.res add the following bindings.
module Css = {
@bs.module("@emotion/css")
external css: {..} => string = "css"
}
module Server = {
@bs.module("@emotion/server")
external renderStylesToString: string => string = "renderStylesToString"
}
Render a component with some styles
In a test file, create some styles to use:
module Styles = {
open Emotion.Css
let container = css({"border": "1px solid black"})
}
Create a React component that uses the styles:
module Container = {
@react.component
let make = (~children) => {
<div className={Styles.container}> {children} </div>
}
}
Render the component with Emotion styles:
let el = <Container> {ReasonReact.string("Hello")} </Container>
let html =
el
->ReactDOMServer.renderToStaticMarkup
->Emotion.Server.renderStylesToString
Which generates the following code (reformatted here for readability):
<style data-emotion="css 1r0rfp">
.css-1r0rfp{border:1px solid blue;}
</style>
<div class="css-1r0rfp">Hello</div>
Note
If you would prefer stronger type safety with Emotion, you may like to use bs-css.
Top comments (0)