How to Extend Styled Component Styles With New Style Props

[00:00 - 00:13] Within component libraries, you often need to extend or modify the styles of an existing component. Style components and other CSS and JS libraries provide functionality for achieving this in a flexible way.

[00:14 - 00:22] In this lesson, we will be creating a text area component that extends the styling of our existing input. To start, we will be creating a new style to element.

[00:23 - 00:33] To extend styles and style components, we can wrap our existing style to input element within a new style declaration. So let's open our styles.ts within fields.

[00:34 - 00:45] And we are going to be exporting a new styled text area component. And this will be a styled style input.

[00:46 - 00:57] So this will return a style to input with any additional styling that we apply here. So what we are able to do with install components is apply as attribute.

[00:58 - 01:08] So we do attributes as text area. And this will replace the underlying input from style and input with a text area element.

[01:09 - 01:26] And to simplify this for TypeScript, let's actually cast this to a text area element. So this acts as if this was a style.text area, but with all the styling of styled input.

[01:27 - 01:37] And now that we have styled element, we can create the shareable text area component. So let's create a new text area.tsx.

[01:38 - 01:47] And let me spell that right. And we can copy and paste what we have in input.

[01:48 - 01:55] And we want to change this to text area. Text area, field.text area.

[01:56 - 02:03] And let's start by importing our styled text area component. We're turning this.

[02:04 - 02:08] And this should complain because this is no longer an input. This is a text area.

[02:09 - 02:27] So let's update our typed generics in forward ref to HTML text area element. And then use component props with ref of text area.

[02:28 - 02:33] Nice. And then let's add this as another compound assessor in field.

[02:34 - 02:52] So we can import text area from text area. And include it as a new composition.

[02:53 - 03:02] And then include it here as well. So now we have label input and text area as available items within field.

[03:03 - 03:13] Now let's document this by creating a new story. And we'll call this text area.stories.tsx.

[03:14 - 03:26] And similar to the input story, this is going to have a new title. And it will be a field rendered with the same label that we used with input and text area with a custom placeholder provided.

[03:27 - 03:44] Let's start storybook by calling the npm run storybook. And we should see a new text area story with the text area styling relative to it.

[03:45 - 03:48] Here we go. So this has all the same styling that we provided for input.

[03:49 - 04:06] But it has replaced the underlined DOM element with a text area. Now that we have a one to one match with what we have in input, let's go back to our demo style guide that shows some of the available styling within our other application.

[04:07 - 04:17] We have a concept for a non-resizable text area. Where by default it shows the resized drag for text area.

[04:18 - 04:29] But sometimes we want to limit that to where it's a static height. So to add this functionality into our text area component, let's include a new style prop.

[04:30 - 04:45] So if we go to text area.tsx, let's create a new is resizable prop to match the style. So let's start by creating a new interface, text area props.

[04:46 - 05:04] And this is going to extend the component props with ref. And it's going to have a new prop called is resizable, which is an optional Boolean.

[05:05 - 05:21] And similar to what we did in the other modules, let's include a default prop for this. Where we want is resizable to be true by default, since that is native behavior .

[05:22 - 05:34] And then let's also include some prop types for our non-types for consumers. Where is resizable is prop types dot Boolean.

[05:35 - 05:54] And that's going to struggle until we import it. There we go.

[05:55 - 06:10] So now that we have this defined within our text area, we need to update this to where it's available within our style text area. So let's go and plot is resizable.

[06:11 - 06:24] And apply it here and we should see an error because we haven't included that with style text area yet. So let's go and include that in our styles dot TS.

[06:25 - 06:46] So what we can do is import that prop interface from text area. Include that with our style text area.

[06:47 - 06:59] And then we want to update the resize CSS property based off of that prop. So we'll have props and is resizable.

[07:00 - 07:10] And if it is not resizable, we want to set the property of none. Otherwise, just let it inherit what is there.

[07:11 - 07:35] And then to make this an available knob in store book, let's go to the text area stories and call default arts where is resizable is true by default. And we should see this update within store book where there's now an is res izable knob where it's resizable by default.

[07:36 - 07:44] But if someone were to turn off that prop, it removes that styling. So let's go and commit our changes and save our progress.

[07:45 - 07:49] And in the upcoming module, we'll learn how to test these components with React testing.