Creating a Generic Link Component Using Styled System CSS

Artem Sapegin
InstructorArtem Sapegin

Share this video with your friends

Send Tweet
Published 2 years ago
Updated a year ago

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:

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:

Artem Sapegin: [0:00] Let's create a Markdown file with some examples, Link.md. Note that we're using our link component inside the text component to have correct styles.

[0:10] Now create the component file, Link.js, and start styleguidist. Import styled-components. Import @styled-system/css. Create a new styled-component based in the arg element called css function from @styled-system.

[0:28] Define base style so we can use our link component with different html elements, for example, buttons, and hover active, and focus link states. Change color to accent, and cursor to pointer. Define focus styles so our component can be used as a keyword. If we don't specify the outline color explicitly, the current text color will be used instead.

[0:50] Export our component.