Create a CSS mixin in React using styled-components
In this lesson, you will learn to create a CSS mixin using styled-components. We will create a drop shadow mixin and use it on two styled-components.
Instructor: [00:00] In this example, we're going to be working with a simple React app which uses two style components, a card, which you'll see here to the right in yellow, and a button, which you'll see here in black.
[00:15] Both of these style components are defined inside our styles.js file. You'll see we have our card and our button. To create our mixin, the first thing we're going to do is create a mixins.js file. Let's create a named export called shadow, which will be a simple arrow function that returns our CSS inside of backticks.
[00:44] Notice how all we're doing is placing the CSS that we'd like to use in our mixin -- in this case, a box shadow -- inside of backticks. to use our mixin, let's head back over to our styles.js file, import it at the top, like so, from our mixins file.
[01:09] Then to use it, let's inject it in our tagged template literal, which is our style component. Now, you'll notice the card has a slight drop shadow to it. We can also use it on the button component by injecting it there as well. Now, both of our style components are using our mixin shadow.
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!