Styling components
Knowledge of component style sheets is required.
Components are styled with the useStyles()
hook (preferred) or the withStyles()
higher-order-component. Both APIs require a
style sheet that is conditionally rendered to
compose React Native style sheets.
To continue with the example found in the style sheet documentation, let's design and style a button component. The button file would look something like the following.
- Hook
- HOC
If you're designing components for a library that'll be consumed externally, we suggest exporting the style sheet so that consumers may customize variants.
#
Composing stylesBoth the hook and HOC APIs provide a style composer function that we aptly name sx
. This function
requires a list of selector names (keys from the style sheet object) in which to determine a list of
applicable styles.
As demonstrated above, the button
selector will always be rendered. However, the button_selected
and button_disabled
selectors will only be rendered when the button is conditionally updated via
the selected
and disabled
props respectively.
We can take this a step further by supporting
variants. All that's required is to pass an
object as the 1st argument to sx()
with the name of every variant, and the variant to activate.
NOTE: The order of selectors passed to
sx()
determines the specificity, as we create an array ofViewStyle
(orTextStyle
,ImageStyle
) objects. Be aware of this when developing.
#
Custom style objectsYou can pass non-Aesthetic composed style objects to sx()
by passing an array.