Create a CSS mixin in React using styled-components

Joe Previte
InstructorJoe Previte
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

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.

~ an hour ago

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

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today