Creating a Generic Text Input Component Using Styled System CSS

In this lesson we’ll create a generic text input primitive component, that we could use to render headings of different levels in our app. We’ll use Styled System to create this component.

We’re going to use Styled System’s CSS package to define styles using our design tokens — values from our theme file.

We’ll use following libraries:

• styled-components
• Styled System
• @styled-system/css

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

npm install styled-components styled-system @styled-system/css

Useful links and documentation:

• Styled System docs
• Styled System CSS docs