Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Create a CSS mixin in React using styled-components

    Joe PreviteJoe Previte
    reactReact

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss