Skip to content

Introduction to styled-ppx

Typed styled components ReScript

Write your styles in CSS inside ReScript files and generate React components, classnames or CSS rules.

  • Type-safe CSS
  • Component-based styling
  • Implements cx/css helpers
  • No abstraction over standard CSS, neither a new DSL
  • Build on top of emotion
  • Support the language: pattern-matching, composition, labelled arguments.

styled-ppx is a ppx, you can learn more about ppxs in the Real World OCaml: Preprocessing with ppx. To get a general idea, are similar to babel-plugins.

module Center = %styled.div(`
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
`)
<Center>
{React.string("Hello from the future!")}
</Center>