Skip to content

Instantly share code, notes, and snippets.

@arecvlohe

arecvlohe/App.re

Last active Jun 21, 2019
Embed
What would you like to do?
A simple example of type safe styles in reason-react-starter
module Styles = {
open Css;
let container = style([padding(px(20)), fontFamily("sans-serif")]);
let card =
style([
maxWidth(px(500)),
marginTop(px(20)),
margin2(~v=px(0), ~h=auto),
padding(px(20)),
border(px(1), solid, hex("eee")),
borderRadius(px(3)),
boxShadow(
~x=px(0),
~y=px(0),
~blur=px(2),
~spread=px(2),
hex("eee"),
),
]);
let header = value => style([color(hex(value))]);
let content = style([color(hex("222"))]);
};
/* Make the component */
[@react.component]
let make = () => {
<div className=Styles.container>
<div className=Styles.card>
<h1 className={Styles.header("222")}>
"Reason React!"->ReasonReact.string
</h1>
<p className=Styles.content>
{j|Type safe styles in Reason React FTW! 😎|j}->ReasonReact.string
</p>
</div>
</div>;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.