An alternative to styling components manually is to use the
which creates a reusable component at the lowest level -- per element. This approach was made
popular by the styled-components library.
styled alias) function requires the name of an HTML element to render
underneath the hood. Using the example below, it would render a
<button />. It also requires 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 HTML elements, all props for that specific element 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.