This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Use Props to Create Dynamic Styled Components with React-Emotion

    Thomas GrecoThomas Greco

    Emotion is a high-performance library for leveraging CSS from within JavaScript files. In this lesson, we take a look at Emotion's React Library, react-emotion, and see how we can use this library to create dynamic components that can be reused throughout an application for the purpose of styling.

    Edit vv5yr8zo00

    reactReact
    javascriptJavaScript
    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 order to use emotion within our application, we need to import it from the React emotion library.

    00:09 Among the features that emotion gives us access to is the default style function. Now we have this function imported, we can use it to define a custom component where we could hold our layout.

    00:26 I'm going to call this layout container. As you can see, I am first going to use that styled import. If I pass a parenthesis here, we'll see that this takes any number of HTML tags. Since we want to style a div, we're going to pass in div here. After this, we could pass in an object which is going to hold our styles.

    00:55 This div, I'm going to set the display property to flex, and I'm also going to set the flex direction to row. One thing to point out is that we're not using regular CSS properties. Instead, we're defining our CSS properties using camelCase, and we're also defining the values using strings.

    01:22 For those of you thinking, "You're also not using semicolons," that is correct. Each property is separated by a comma when using this syntax.

    01:33 Now, if we replace these divs that are wrapping our text bar components with that container component that we just defined, we'll see that our content no longer stacks on top of each other, and it displays each component side-by-side.

    01:50 Let's keep this going. I'm going to add a flex wrap property on here, and I'm going to give it the value of wrap. Now we see that our styles are being reflected right in the browser, and our flex box is now wrapping, which means that it's stacking our components on top of each other when it runs out of space.

    02:12 This is cool, and it shows us how we can use emotion to create styled components. Let's see how we can leverage props to make this dynamic.

    02:22 Here, I'm going to wrap our style object inside of another parenthesis, because we're going to return it depending on the props that our container gets. In here, we're saying that if there's a flex box type property, give flex direction that value. By default, we're going to set this to row.

    02:51 Following this, I'm saying that if there's a wrap property on our component, use that one. If not, use wrap by default. The last thing I'm going to do here is define a justify-content property. Here, we're going to say if our justify prop has a value, give justify-content that value. If not, give it the value of space around.

    03:24 We're getting the space around value, but we care about making it dynamic. Let's pass in some props here. To start this off, I'm going to pass in no wrap to that wrap property. As a result of this, our components are no longer being stacked on top of each other regardless of how small our view pack gets.

    03:45 Next, I'm going to pass space between to our justify prop, and our application is updating accordingly, and it's pushing our components to the sides.

    03:56 The last thing I'm going to do is change our flex box type prop to a column. As a result, we see our components stacking on top of each other, and no longer being displayed within the same row.

    Discuss

    Discuss