 Resources from Sara Vieira in 2024

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.



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

Styling React Applications with Styled Components

In this collection, we will dive into using  `@reach/router` as a routing option for your React application. We will start from the beginning and cover everything from Links to Nested Routes.

Using  `@reach/router` for navigation in React Apps

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



JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

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

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

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

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

In this lesson, we will use the  `@reach/router` library to create navigation that will take us to different pages in our application.

We will create a homepage and about page and switch between these without page re-renders

Create navigation between pages using  `@reach/router`

In this lesson, we will add url parameters to our application using the  `@reach/router` library.

We will use the example of getting the `username` prop from our location to greet a user.

Use url parameters in  `@reach/router`

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

In this lesson, we will be adding routing and two routes (homepage and about page) to a React application using the  `@reach/router` library

Topics

Instructors

Content Type

Sara Vieira