Name: Extend styles with styled-components in React
Uploaded: 2018-10-13T14:45:03-05:00
Description: In this lesson, you will learn how to extend styles from one styled-component to another in a React app. This is helpful when you have two styled-components that are similar but differ in one or more CSs properties.

In this lesson, you will learn how to extend styles from one styled-component to another in a React app. This is helpful when you have two styled-components that are similar but differ in one or more CSs properties.

https://app.egghead.io/api/v1/lessons/react-extend-styles-with-styled-components-in-react/subtitles

Extend styles with styled-components in React

Instructor: [00:01] In this example, we will be working with two styled-components that we have to find in our .styles JS file. The first one you'll see is a button which we have over here in orange. The second is our help button which we have over here in red.

[00:20] You'll notice that they share a lot of the same CSS. What we can do to refactor this is extend the styles from our button onto our help button.

[00:31] To do that, we're going to use this special syntax from styled-components where we use styled as a function and then passing our base component, in this case, the button. Then what we can do is remove the CSS that they have in common.

[00:52] Our help button is created by extending the styles from our button styled-component and then modifying a few things like the background color and margin and adding position bottom and right.

Extend styles with styled-components in React

Share this video with your friends