Creating a Generic Link Component Using Styled System CSS

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

There are two common ways to implement a link primitive component. The first method is to use the Text component as a base, this way we’ll be able to use the link anywhere in the app without wrapping it in the Text component to have the correct text styles. However, if we put a link into, for example, a heading, it’ll still be rendered using the base text styles, like font size and color, because they are hardcoded in the component, which make this approach inflexible. The second method is to make the link inherit parent styles. This way we’ll be able to nest link into any other text component, and it will look good in any context.

We’ll implement our component using the second method.

We’re going to use Styled System’s CSS package to define styles using our design tokens — values we’ve defined in the 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