Overriding Styles (Utility Props)
We understand that writing styles using sx props can be a bit challenging to learn so we offer the option to pass down utility props for any Styled Component, we internally convert these to sx props (We are also working on a babel plugin that does this at build time to save time for this conversion).
How to write utility props?
A simple rule for utility props is that they represent the final property you want to apply to the component's style. These utility props will override all other stylings, except for the style prop. Here is a demo of the syntax.
<StyledView borderColor="$grey600" bg="$grey700" borderRadius="$md" />
This will turn into :
sx={{ borderColor: "$grey600", bg: "$grey700", borderRadius: "$md" }}
Warning: Writing inline styles, like all good things, can negatively impact performance. So we highly recommend you keep it to a minimum.