Components

styled.{{tag}} is the extension that allows to create React Components the same way as @react.component does. Here, you only define the styles of an 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>

React props

Styled components expose all the react props within their API, except className.

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

💡

If you create a Dynamic component with a prop that collides with the names of the React props, it will raise an error.

Components

React props#

React props