This video is available to students only

Within component libraries you often need to extend or modify the styles of an existing component. Styled-components and other CSS-in-JS libraries provide functionality for achieving this in a flexible way. In this lesson we will be creating a Textarea component that extends the styling of our existing Input.

Extending existing styles#

To start we will create a new styled element. To extend styles in styled-components we can wrap our existing StyledInput element with a style declaration.

This will extend the existing styles from our Input element. For the Textarea component we want to retain this styling, but change the underlying HTML element that is rendered from an input to a textarea. We can achieve this with the as prop.

Using the attrs() and as utilities we are able to create a new styled element that retains the styling of an Input component while rendering a new textarea element.

Creating the Textarea component#

Now that we have a styled element we can create the shareable Textarea component. Let's create a new file:

The implementation of the Textarea mimics Input closely. The differences will be updating the TypeScript interfaces to reference textarea, updating the component displayName, and returning the new StyledTextarea element.

Next, we need to add Textarea as a compound component to Field.

No discussions yet