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. For example, an input will expose all the props of the input element:

module Input = %styled.input(`
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 8px;
 
  &:focus {
    border-color: #aaaaaa;
  }
`)
 
<Input
  placeholder="Enter your name..."
  maxLength=255
  onChange={_ => ()}
  onBlur={_ => ()}
/>

module Input = %styled.input(`
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 8px;
 
  &:focus {
    border-color: #aaaaaa;
  }
`)
 
<Input
  placeholder="Enter your name..."
  maxLength=255
  onChange={_ => ()}
  onBlur={_ => ()}
/>

💡

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

Extend styles with className

Following the example above, you can extend the styles of the input component by passing the className prop. It's not recommended to use className prop to extend the styles of a component, but it's useful when you need to extend the styles of a component from a third-party library.

<Input
  placeholder="Enter your name..."
  maxLength=255
  onChange={_ => ()}
  onBlur={_ => ()}
  className="extra-classname"
/>

<Input
  placeholder="Enter your name..."
  maxLength=255
  onChange={_ => ()}
  onBlur={_ => ()}
  className="extra-classname"
/>

The resultant HTML will be: first the generated className by emotion plus the className passed by props.

<input class="css-fl09o-Input extra-classname" maxlength="255" placeholder="Enter your name...">

<input class="css-fl09o-Input extra-classname" maxlength="255" placeholder="Enter your name...">