Extend styles with styled-components in React
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.
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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!