Skip to content

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.