Course

Component-driven development in React

1
Introduction to styled-components
4m 50s
2
Create Design Tokens for Colors, Font Sizes, and Whitespace Using styled-components
4m 5s
3
Creating a button React component using styled-components
1m 55s
4
Creating a button React component with dynamic styles using styled-components
50s
5
Creating a generic button React component with multiple variants using styled-components
33s
6
Simplifying styled-components styles by using Styled System CSS and variants
1m 17s
7
Create the Box Layout Primitive Component Using Styled System
55s
8
Creating the Flex Layout Primitive Component Using Styled System
28s
9
Creating the Grid Layout Primitive Component Using Styled System
36s
10
Creating the Stack layout primitive component using Styled System
1m 37s
11
Creating a Generic Heading Component Using Styled System Variants
2m 9s
12
Creating a Generic Link Component Using Styled System CSS
54s
13
Creating a Generic Text Input Component Using Styled System CSS
1m 9s
14
Building User Interfaces by Composing Primitive React Components
2m 11s
15
Building Responsive User Interfaces by Composing Primitive React Components
1m 28s

⚠️ This lesson is retired and might contain outdated information.

Introduction to styled-components

InstructorArtem Sapegin

Share this video with your friends

Send Tweet

Learn styled-components in less than five minutes. Learn how to create styled components, how to write styles, how to use pseudo-classes, like hover or active, how to write dynamic styles, that depend on passed to component props, how to write media queries and extend another component.

View code for this lesson

Component-driven development in React

Introduction to styled-components

Social Share Links