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.

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.

Styling React Applications with Styled Components

Instructor

Course content (12 lessons)

Instructor