ReasonML Quick Start Guide

Using styled-components

One of the most loved features of styled-components is the ability to dynamically create CSS based on a component's props. One reason to use this feature is to create alternate versions of a component. These alternate versions would then be encapsulated within the styled component itself. The following is an example of a <Title /> where the text could be either centered or left-aligned and optionally underlined.

const Title = styled.h1`  text-align: ${props => props.center ? "center" : "left"};  text-decoration: ${props => props.underline ? "underline" : "none"};  color: white;  background-color: coral;`;render(  <div>    <Title>I'm Left Aligned</Title>    <Title center>I'm Centered!</Title> <Title center underline>I'm Centered ...