We understand that styling components using sx props can be a bit challenging to learn. To simplify this process, we offer the option to pass utility props to any Styled Component. Internally, these utility props are converted into sx props
Let's explore how you can utilize these utility props.
Basic styling
You can apply aliases and styling props directly to the component.
, TypeScript suggestions are not available, but you can write props prefixed with
${states/media/colormode/platform/descendants}-*
.
This will turn into :
<StyledButton
sx={{
flexDirection:"column",
":hover":{
bg:"$primary600",
},
_text:{
":hover":{
color:"$text800",
},
},
"@md":{
flexDirection:"row",
},
}}
/>
More utility props
If your component's props become cluttered when using the above utility props, we offer support for an object-based approach to improve code maintainability.
<StyledButton
flexDirection="column"
$md={{flexDirection:"row"}}
$hover={{
bg:"$primary600",
_text:{
color:"$text800",
},
}}
/>
In this case, you can specify states, colormode, media queries, and descendants in object form, prefixed with
$
. These objects take sx properties as values.
We have provided complete TypeScript support for this approach as well.