React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In the course, we will learn how to use the `styled-components` library to style our React applications. We will start from the basics and dwell in more advanced cases.

With this course, you can get the necessary knowledge to use the `styled-components` library to style your React applications in the future.



We are going to learn how to make our first component using the `styled-components` library.

We'll use `styled.h1` to create a `<h1>` component and adjust it's font-family, positioning and color with css.

javascript

Style an HTML Element with Styled Component

We are going to learn how to add styles to a react component using the `styled-components` library.

I've done a lesson on how to [Style an HTML Element with Styled Components](https://egghead.io/lessons/react-style-an-html-element-with-styled-component) but now it's time to style React Components. We'll be able to wrap a React component in a styled component to extend the style of that component.

To style an HTML Element, you would do `styled.{element}` but with a component, you would replace the `.` with a `()` so it would look like `styled({component})`

Here, we will style a button from `material-ui` and adjust his size with css.

Style a React Component with Styled Components



We will create global styles that apply to the whole document using the `styled-components` library. 

We create a global style using the `createGlobalStyle` keyword and set that to a variable. Inside of that variable, we can now set our custom styles. We wrap our application in inside of a fragment, `<>`, and put our new global style up at the top, just below the fragment.

Creating Global Styles with Styled Components

We are going to learn how to add styles to a react component using the `styled-components` library.

We will get a list of people and give a different color and background color when their position in the list is an even number, like zebra stripes. 

Inside of the backticks for our custom styled element, we can interpolate and add in a function that checks if the name in our array is at an even position, it’ll change the text color to white and the background color to black.

Adjust Style based on props with Styled Components

We will be using the `keyframes` function from styled-components to animate the position and rotation of an `h1`.

Like styling using the global variable, we set the `keyframes` keyword to a variable and inside of the backticks, we set what we want our `element` to do. Then in a custom `element`, we set `animation` to our custom `keyframes` variable.

Animate Styled Components in React

We will integrate a theme in our small app using `styled-components` and the `ThemeProvider`.

In the `index.js` file, where you have your `App` component being rendered, we will wrap it with the `ThemeProvider`. We can set some colors to an object and call it `theme`. We set that `theme` to be the `theme` prop inside of our `ThemeProvider`. 

Now over in our `App.js` file, we can gain access to those colors stored in our theme by setting `color: ${props => props.theme.colors.purple};`. We can change any `css` in that `theme` object and get access to that wherever we want.

Create and use a Theme in Styled Components

We will use the `styled-components` library to go over how to style pseudo-selectors and classes.

The pseudo-selectors, such as `hover` and `before`, work the exact same as regular CSS. In our `element` or `class` styling backticks, we can set them like `:hover{}` and `:before{}` to change what the element or component does.

Style pseudo-selectors and classes in Styled Components

We will learn about the `css` prop we have at our disposal in `styled-components` to change the style of a component right in the render function.

We will use this prop to override the text color of a button with the one we define in this prop.

Using the `css` prop to define styles in Styled Components

In this lesson, we will use the `as` prop to reassign the HTML tag that is associated with one of our styled components.

The `as` prop will be used to reassign a `button` element to be an `a` element

Using the `as` prop to reassign the HTML tag

We will learn about the `attrs` method that allows us to change and add attributes to our styled elements.

We have the two buttons that we made in a previous lesson. We can add `.attrs` onto our `styled.button` to be able to add on types. `attrs` can return an object or a function. We will see the difference between the two and why you would use one over the other.

Use the `attrs` method to add HTML attributes in styled-components

We will learn how to use the `styled-components` library using the object notation instead of template strings.

To use object notion, we will replace our backticks with a function and we can use props to change our elements. 

We will go through a heading and transform it from template literals, backticks, to objects.

Use Styled Components with the Object syntax

Since now we know that we can add functions to our styling, we can do so much. Here we have a json file with a list of the 20 worst movies on IMDB. We can actually change the colors of our list using `if` blocks.

We will take a look at how to style your components very granularly based on their props. We will style a component based on a float value, string, and its position in the array.

Style a component based on complex props with Styled Components

Styling React Applications with Styled Components

https://app.egghead.io/api/v1/lessons/react-style-an-html-element-with-styled-component/subtitles

Instructor: [0:00] Let's build our first styled component. The first thing we need to do is import styled, which is the default export from styled components which is already installed, like this. Now, the way the styled components works is that you create a components.styled. What this means is that you make an actual React component.

[0:19] I'm going to create a React component called heading one because we're replacing this H1 that looks terrible. I'm going to say heading one = styled.h1. After the thing, the thing that says .something means that this can be any HTML component as you can see here.

[0:37] If I say .h1 and then I do anything so let me say font-family and I'm going to do the apple one, so I'm going to stoop this an apple system. Then I'm going to say text-align: center. Cool. Now we have a React component, and it's supposed to have a font-family and a text-align. But absolutely nothing has happened.

[1:01] Let me copy this. What we have to do is, we have to actually use this React component. This will return us an H1 with some classes already applied to it. Change it here, and now as you can see, it actually styled. Just to make sure, let's add a color.

[1:17] Let me see a color. It's not working, so I'm just going to say, Papaya Whip, which is obviously the worst color I could ever choose, but there you go. Now it's a style component, and you can change your styles here.

https://app.egghead.io/api/v1/lessons/react-style-an-html-element-with-styled-component/transcript

https://app.egghead.io/api/v1/lessons/react-style-a-react-component-with-styled-components-c5a884cf/subtitles

Instructor: [0:00] Let me import styled from 'styled-components'. As you can see, I have a button here. This button comes from Material-UI.

[0:12] Let's say I want this to be 100 percent in width. Right now, there is no prop that will do that. Maybe there is, but I want to do it with styled-components.

[0:20] The way that we can do this is that I can say const, and I can emit fullWidthButton, for example. I can say that it equals styled. If you want to style an HTML element, you put a dot. If you want to style the components, you put parentheses. In here, you pass the actual component that you want it styled.

[0:40] In this case, I want to style the button. I want to delete this because this is not necessary. I'll say width 100 percent. Cool. Nothing happens until we actually use it.

[0:55] As you can see, the button is now 100 percent. Also, as you can see, all the props that work in the button from Material-UI still work here.

[1:03] If I remove this, you will see that the button is completely different. Let's put this back. Let's put this back, and now, let's just add something else to be 50 pixels for who knows why. You can also add that. That's how you can style React components with styled-components.

https://app.egghead.io/api/v1/lessons/react-style-a-react-component-with-styled-components-c5a884cf/transcript

https://app.egghead.io/api/v1/lessons/javascript-creating-global-styles-with-styled-components/subtitles

Instructor: [0:01] Let's import {createGlobalStyle} from 'styled-components'. To give something a global style, I can create a const with it and remember this would be a component, so we have to start it with an uppercase. I'm going to say Global. I can type Global. It's going to be equal to createGlobalStyle.

[0:21] Anything inside of here will be styled in the entirety of the application. It would be a global style in normal CSS global style.

[0:29] I'm going to say body, and I'm going to say text-align: center. I'm also going to say font-family, and I'm going to say -apple-system. There we go. I close this.

[0:44] The way this is used is that now you have to apply it. I'm going to open a fragment here, apply it and close the fragment right here at the bottom. As soon as I do this, you can see that everything is now Arial. Just to make sure that you can still edit this, I can come here and say color: green. Now everything is terrible but aligned with a new font family.

https://app.egghead.io/api/v1/lessons/javascript-creating-global-styles-with-styled-components/transcript

https://app.egghead.io/api/v1/lessons/javascript-adjust-style-based-on-props-with-styled-components/subtitles

Instructor: [0:00] I have this list of people, which are 1, 2, 3, 4, 5 names. I have this person, which is already a styled component. I want to check if the number is even.

[0:11] For example, Sara is 1 and Alex is 2, which means that it's an even number in the list. Basically, I get the index of the array. I add it 1, because our array starts in , modulus, and then see if it's . If this returns true, then it is even.

[0:27] What I want to do is kind of a zebra stripe type of thing. To do that, I need to style this component based on the props. How do we do that?

[0:36] As you can see, the styled component already works with backticks. The way that we do is how we interpolate with backticks.

[0:45] I am going to do this, and everything that we use here gets all the props. I am going to do this. Let's do something. Let's say if props.even I want to do something. I want to return a different value than color gray. I can say, "Return and open backticks again just 1, not 3." I can say, "Color white."

[1:14] These two, which is number 2 and number 4, are hidden because the background isn't a visible color for white. Let's [inaudible] background of black. Now we have this zebra stripe effect that we were able to do.

[1:29] The idea here is that in here I pass a prop called even which is either true or false based on this math that I have here. In here, I check all the props. I check if the even prop is true. If it is, it means that it is an even number, it is an even list item and I want to pass different CSS.

[1:48] You don't want to write all of this every time you want to check something. One thing that we can do is minimize this a lot by just checking. If we have the props, we can say props.even and we just pass the text.

[2:04] This means if props.even is true, you render this or in this case you return this. Let me just add something else so that you can see that it's the same. List all of none and only these ones will have a list all of none. This is how you can style these components based on the props that you pass it in your React components.

https://app.egghead.io/api/v1/lessons/javascript-adjust-style-based-on-props-with-styled-components/transcript

https://app.egghead.io/api/v1/lessons/javascript-animate-styled-components-in-react/subtitles

Sara Vieira: [0:01] Let's import keyframes from styled-components. We can import it like this and now to use it, to create animations with styled-components we say const and then move. That's the name of it, because I'm just going to move it.

[0:12] I'm going to say keyframes, open up the back ticks and then write an animation like I would in normal CSS. I can say from, and I'm going to say transform, and I'll say translateX. It starts at zero like this. I'm just going to copy this since it's easier than writing it, and I'm very lazy. I'm going to say two, and I'm going to say 100 percent, so that it goes from one side to the other.

[0:41] How do we use this? Obviously, it's not animating. I come here and I say animation, and the main difference is that you can't just type move, you have to interpolate it like so, so ${move}, then the duration, two seconds, the transitioning, so ease. Then I'm just going to say infinite because I wanted to run forever. If I do this, you can see that now we have this animation. You can also add a rotate, for example, so rotate. I'm going to start it at zero and say rotate. I'm going to start it at 45, and I have to put deg.

[1:15] Now it does this, which is terrible, but it is an animation. This is how you can animate the styled-components.

https://app.egghead.io/api/v1/lessons/javascript-animate-styled-components-in-react/transcript

https://app.egghead.io/api/v1/lessons/react-create-and-use-a-theme-in-styled-components/subtitles

Sara Vieira: [0:01] Let's import ThemeProvider from styled-components, so import -- we import it like this because it's not the default export -- {ThemeProvider} from "styled-components".

[0:11] This is the component that we have to wrap our entire App with. I'm going to come over here and wrap our App with the ThemeProvider and close it like that.

[0:23] We're going to get an error because it says the "theme" prop is required. To use the ThemeProvider, we need to pass it a theme, and themes are just general JavaScript objects. I can say const theme = an empty object, and I can pass it in here, so theme={theme}.

[0:45] That's fine. That will work, but we have zero theme in it. I want to add some colors. I'm going to say colors, and I'm going to get the colors that I have in my clipboard, so like this.

[1:00] That's cool. Now, we have some colors that we can apply, but how do we apply this? If I go back to my App.js, I have a heading here, which says, "Hello Styled Components," and this has a font-family.

[1:09] Let's add some color to it. I'm going to say color, and I'm going to call in from the props which we can get from any style component, and I say props.theme.colors.purple. Now it's purple because we call this from the theme and the theme that is defined here.

[1:31] Let's say that I want to have other things in it. The reason that I added a color sub-object to the theme object is because you usually don't want just colors in your theme. Let's add the font as well. This is our body font. This will be used in all of the body. Let me delete this and just say serif for example, so that we can see the difference.

[1:51] I'm going to come here, and I'm going to create a new object, and I'm going to say that this is the fonts object, and it's going to have a body font. In the body font, I can just copy and paste this. Cool.

[2:06] Now we can also use this, so I can say props...Better yet, let's deconstruct the prop so I can come here, and I can say theme, and that will get just the theme from the props. In here, I can just say theme.fonts.body. This will use our body font. If I change it here and I just say serif is the first font and just update, you can see that now we have a serif font.

[2:31] This is how you can use themes with styled-components.

https://app.egghead.io/api/v1/lessons/react-create-and-use-a-theme-in-styled-components/transcript

https://app.egghead.io/api/v1/lessons/react-style-pseudo-selectors-and-classes-in-styled-components/subtitles

Sara Vieira: [0:00] I have this button, which doesn't do anything. It also doesn't have a hover state, which is quite annoying. We want to let people know that they can actually use this button.

[0:11] How do you do this in styled components? Sometimes, there is a bit of hard work when it comes to adding hover and pseudo-elements, as well in CSS and JS libraries. In styled components, it works exactly the same way as you would do it in CSS.

[0:24] If I want to add a hover state, I can just come here and say, "Hover, open and close parentheses." If I say that I want to switch these two -- let me copy this over here. Let me say background, and this one is supposed to be the color now, if that's how you type color. There we go. Supposed to be the color.

[0:42] Now, if I hover over it, you can see that the color in the background have completely changed. Let's just add a transition -- all 200 milliseconds ease. Now, you can see that we have an animation for hover. The same thing works with before, so if I say before. I think I have an extra one, let me just remove it.

[1:04] If I say content equals and let me add an emoji. Now, you can see my most used emojis. It equals this, you can see that now, we have this as before. This is how you can style pseudo-elements and pseudo-classes using styled components.

https://app.egghead.io/api/v1/lessons/react-style-pseudo-selectors-and-classes-in-styled-components/transcript

https://app.egghead.io/api/v1/lessons/react-using-the-css-prop-to-define-styles-in-styled-components/subtitles

Sara Vieira: [0:00] I have these three buttons here and let's say, for some reason, I want this button, which is this one here in the elements tab, I want this to have a different color. One thing that we can always do is come here and say style and open another one and say color and then "green," if I wanted it green. I miswrote style, so that's why nothing was happening.

[0:26] If I do this, you can see that this adds it to the element.style, which is not the best way. This is very bad if we talk in terms of maintainability to override these styles. Fortunately, styled-components give us something called the CSS prop, which allows us to do this in a cleaner way. If I say css={`color: green`}, you will see that absolutely nothing happens.

[0:49] One of the things that need to happen is that this includes a either Babel plugin or a macro. I'm using create-react-app, so I support macros. I need to import styled from "styled-components/macro".

[1:01] If I do this, you'll see that this button is green, and you will also see that it just has another class. Another class has been appended to it, and it just overrode whatever it had. If I add something else...Let's say that in here, this is supposed to be important -- where is that? Where is the color? Color, color, color -- and I put important, this is obviously overridden.

[1:31] The good thing about this is that it makes your CSS way more maintainable than normal style tags, as it is possible for you to override these things, as they are just applied CSS classes.

[1:41] This is how you can use the CSS tag in styled-components with the macro.

https://app.egghead.io/api/v1/lessons/react-using-the-css-prop-to-define-styles-in-styled-components/transcript

https://app.egghead.io/api/v1/lessons/react-using-the-as-prop-to-reassign-the-html-tag/subtitles

Instructor: [0:00] I have this button here and this button is already a styled component. As you can see here, it's a styled.button.

[0:06] Let's say that I want to add an A, a link and say a.href, and we can just add https://global.com. It doesn't really matter what's written there, but let me just fix it. Now, let's type Google and close this A. This A does not look good. Let's just be honest about it.

[0:29] What if we could reuse the button styles, but use it as an A. We want the button styles. I can just come here and say, "OK, cool. I want this to be a button." The problem is that hrefs don't work. It makes sense. That's how buttons work.

[0:44] We don't want to add this on an on click. There is a prop called as, which we can pass to any styled component that will basically reassign the HTML element. In this case, it's a button, but this part can be actually reassigned.

[0:58] If I come here and I say as and I add the HTML button at HTML component I want to replace it with, like this case A, this actually becomes a button. You can see that the styles are the same. We just have the sticks underlined, which is fixable in both by just adding text decoration and adding none.

[1:20] Now we have a completely working A as you can see and we have a button that doesn't go anywhere. This is how you can reassign HTML elements in styled components.

https://app.egghead.io/api/v1/lessons/react-using-the-as-prop-to-reassign-the-html-tag/transcript

https://app.egghead.io/api/v1/lessons/react-use-the-attrs-method-to-add-html-attributes-in-styled-components/subtitles

Sara Vieira: [00:00] I have these two buttons here and these two buttons as you can see have no type assigned to them. It's always good for buttons to have at least a type of button and for accessibility purposes and also for readability in terms of the DOM.

[00:13] It's hard for us to remember this as developers sometimes. That's why I want to talk about attrs, which are a chainable method that exists in styled-components that allows you to push attributes into your actual HTML element.

[00:28] Using that, we can actually "fix these buttons". Let me add attrs here. This can return an object or a function. In this case, I'm just going to return an object and I'm going to say that the type is now going to be equal to button. By default, all of the buttons will have a type of button.

[00:49] We do have a problem though, which is that if this one for example is supposed to have a type of submit, it will never get overwritten, because it gets here and it's like, "Oh, OK, you're one type of button." Whatever it is here actually overrides what is said here, which is not good.

[01:05] Let's do this in a way that this can actually get to props. As I said, this can also return a function. I can say props, and then do this, close it here and here, and now the props are passed into here. I can say props.type, or it is a button.

[01:23] In this case, you can see that we have a type of submit, which is the one that I added, and then we have a type of button. This is how you can change the attributes of an HTML element using styled-components.

https://app.egghead.io/api/v1/lessons/react-use-the-attrs-method-to-add-html-attributes-in-styled-components/transcript

https://app.egghead.io/api/v1/lessons/react-use-styled-components-with-the-object-syntax/subtitles

Sara Vieira: [0:00] We have two styled components here. There's two headings, this one is bigger than this one and we can define it here with the props. We're doing this with backticks. We're doing this basically text style.

[0:12] There is also another way that we can style these components. We can use object-based styling. Let's see how different that is.

[0:19] I'm going to first comment this, so, add line comments, and right now, we're going to get an error. Heading is not defined. I'm going to say const heading = styled and it's the same thing, so style.h1. Then, instead of opening backticks, you open function and this function can return an object.

[0:37] Let's start with textAlign and I'm going to say center with quotes and all objects is in the center. Right now here, we do get the prop. Another thing that this can return is a function and that function takes in the props. For that, we need to say props here and then do this and this.

[0:57] Now we have access to the props here. All the thing that we want is small, so let me just deconstruct small from here, so do this. Add small, and now we can say fontSize, and I'm going to say, if small, then do 16, else do 24. I'm missing one here, and there you go.

[1:19] It is slightly cleaner, and there's no need for pixels, so both things work. If I do 24 pixels, that will also work. In Object, it will always default to pixels, so if you want to do something else, like Ems or something, you will have to type it, but it will default to pixels.

[1:37] Now, so that I don't forget, here's a comma, and then we add the next one. I'm going to say fontSize. Now fontSize, fontFamily. I'm going to copy it from here, so apple-system, sans-serif.

[1:50] Let's add the quotes and copy apple-system, sans-serif, and we can delete this.

[1:56] Both of these things...Let me bring it back. Both of these things -- this and this -- do exactly the same thing. They're just different ways of writing it, so whatever you prefer can be the way you write styled-components.

https://app.egghead.io/api/v1/lessons/react-use-styled-components-with-the-object-syntax/transcript

https://app.egghead.io/api/v1/lessons/react-style-a-component-based-on-complex-props-with-styled-components/subtitles

Sara Vieira: [00:00] Let's look at this example where I have the list. I think it's 20 of the worst movies ranked on IMDB, which is a very important list to always have at hand which I do. It's very important. I also have a theme here, which has the background, the accents which is this color, foreground and then a red and a yellow that I want to apply based on the rating.

[00:23] We already passed the rating, so I get to movie.rating and I just parseFloat because it comes back from the API. By the API we mean JSON file as a string. I want to parse it as an int, in this case a float. We have the color which just returns the accent.

[00:40] One thing that we do is that in this case, instead of just returning something, we can create a function. Let's just return null yet again for now, so that our error goes away. As you can see, nothing new.

[00:53] The first thing is that I want to check if it's...I'm going to divide it from 2 to 2.3, 2.3 to 2.7 and then all the rest. I'm going to say if props.rating is smaller than 2.3, I want to return props.theme.red. What happens? Only these ones are red. OK. We're getting somewhere. Now, let me copy and paste this and we can say 2.7 and I can say yellow.

[01:37] Now, we can either put another if or we can just return. If I say return, if I can type return props.theme.accent and all the rest will be basically with this accent.

[01:56] Let's now do something to make this a bit cleaner. The only thing we need from here is the rating and the theme. I'm just going to get those two things, so that I don't have to do this with the props and it looks way cleaner.

[02:11] As you can see, you can basically do anything you wanted here. This is a normal function. You can even check for a name. Let me come here and add a background for example. I'm going to pass the movie title to the rating as well. I'm going to say title = movie.title and there we go. That's doing absolutely nothing.

[02:36] I'm going to check if it's "Saving Christmas" and if it is, I want the background to be black. I'm going to say background and I'm going to create another function. I'm going to say props, from there I want to say props.title. If it's equal to Saving Christmas, then give me back black. Otherwise, just give me null which is just going to say it's basically...Oh, sorry. It's basically transparent.

[03:06] As you can see, only this one actually has the background of black. Let me just see it. Yeah. Only this one has the background of black. You can actually do a whole bunch of different things. You can get very granular and select something very specific to have a certain style. Literally, the sky is your limit. You can even pass the array.

[03:27] For example...I'm just going to explain that. I have movies here and I can do something as in I pass the i, so I can remove this and I say length is movies.length. I say i = i. Then, I'm going to say i + 1. I'm going to say number = i + 1. Now let's check if it's the last one.

[03:56] We can easily do this even inside of here. I'm going to say if movies.length equals...If props.movies.length, sorry, props.movies.length === props.number. Let's just do this props.movies.length and then props.number, props.length. Now, you can see that only the last one has this.

[04:30] You can really do pretty much anything. It's just JavaScript, which is not just a just. Well, you can do pretty much everything because it's JavaScript and with JavaScript, the sky is the limit.

[04:41] This is how you can do more advanced things adjusting your styles using the props that come from your actual styled-components.

https://app.egghead.io/api/v1/lessons/react-style-a-component-based-on-complex-props-with-styled-components/transcript

Course Content