An alternative to styling components manually is to use the
which creates a reusable component at the lowest level. This approach was made popular by the
createStyled() function requires a standard
Text, etc, and a partial
style sheet (either an object or function), in
which a single element is styled, instead of multiple elements.
Because this API is based on existing native components, all props for that specific component are automatically supported and are typed correctly if using TypeScript.
Styled components can support any number of customizable variations out of the box.
You can then enable a variant by passing a prop with the name of a variant, and a value of one of its types.
If using TypeScript, you'll need to type the variant props manually using the 2nd generic.
Styled components can also extend and compose around other styled components. When using this approach, all styles and their variants are inherited.