Use Props to Create Dynamic Styled Components with React-Emotion

Thomas Greco
InstructorThomas Greco
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

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

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.

egghead
egghead
~ 3 minutes 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 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

  • 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