Styled Components

These lessons cover converting a React app from using traditional CSS loaded from a file to styled components.

Watch User Created Playlist (5)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Style a React component with styled-components

P

Style the body element with styled-components and "injectGlobal"

Theme your application with styled-components and "ThemeProvider"

Create component variations in React with styled-components and "extend"

Animate your user interface in React with styled-components and "keyframes"

react tutorial about Style a React component with styled-components

Style a React component with styled-components

3:04 react PRO

In this lesson, we remove the mapping between a React component and the styles applied to it via classnames. We write our styles directly within the component, in a real CSS syntax, with the full power of JavaScript.

react tutorial about Style the body element with styled-components and "injectGlobal"

Style the body element with styled-components and "injectGlobal"

0:52 react

In this lesson, we see how we can apply styles globally with the "injectGlobal" helper method in styled-components. This method allows us to apply styles on the body element, which cannot be wrapped in a styled-component.

react tutorial about Theme your application with styled-components and "ThemeProvider"

Theme your application with styled-components and "ThemeProvider"

1:17 react

In this styled-components lesson, we set a "primary color" within a UI "theme" object. We make this theme accessible to all components by wrapping our application inside a .

react tutorial about Create component variations in React with styled-components and "extend"

Create component variations in React with styled-components and "extend"

1:09 react

In this lesson, we extend the styles of a base button component to create multiple variations of buttons, using "extend". We can then modify the base styles in one place, and have all button types updated.

react tutorial about Animate your user interface in React with styled-components and "keyframes"

Animate your user interface in React with styled-components and "keyframes"

1:15 react

In this lesson, we learn how to handle CSS keyframe animations in styled-components, via the 'keyframes' helper.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?