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...">