Style an HTML Element with Styled Component

Style a React Component with Styled Components



Creating Global Styles with Styled Components

Adjust Style based on props with Styled Components

Animate Styled Components in React

Create and use a Theme in Styled Components

Style pseudo-selectors and classes in Styled Components

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

Using the `as` prop to reassign the HTML tag

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

Use Styled Components with the Object syntax

Style a component based on complex props with Styled Components

Styling React Applications with Styled Components

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.

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.

Style a component based on complex props with Styled Components

Share this video with your friends

Course

Styling React Applications with Styled Components