Styled components

styled.{{tag}} is the extension that allows to create React Components from the styles of the element. All HTML Elements are available under styled.{{tag}}. An example of it will be:

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

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

React props (makeProps)

Styled components expose all the React component props within their API.

module Input = %styled.input("...")
 
<Input
  placeholder="Enter your name..."
  maxLength=255
  onChange={_ => ()}
  onBlur={_ => ()}
/>

module Input = %styled.input("...")
 
<Input
  placeholder="Enter your name..."
  maxLength=255
  onChange={_ => ()}
  onBlur={_ => ()}
/>

💡

You can extend the styles from a component via className prop.