Create a Generic Text Component Using Styled System Variants

In this lesson we’ll create a generic text primitive component, that we could use to render any text in our app. We’ll use Styled System and its variants feature to create this component.

Styled System variants allow us to change multiple style attributes with a single component prop. We’re going to use variants to switch between different text styles.

There are two ways to define variants in Styled System: in the theme file, and in the component file. The first method is good when you want to later redefine styles for a part of your app using nested theme providers, or want to reuse the same component on several apps. The second method is a bit simpler, so we’re going to use it in this lesson.

The number of variants depends on your app. You’ll need to find the minimum number of text styles to cover most use cases. Talk to your designer, they may already have what you need. In this lesson we’ll implement a few basic styles that are often used in web applications.

We’ll use following libraries:

• styled-components
• Styled System

You can either use this lesson’s Git repository or install them manually in your project:

npm install styled-components styled-system

Useful links and documentation:

• Styled System docs
• Styled System variants docs
• An example of defining variants in the theme file