Creating a Generic Text Input Component Using Styled System CSS

InstructorArtem Sapegin

Share this video with your friends

Send Tweet

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:

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: