Autoplay
Autocomplete
Speed
Previous Lecture
Complete and Continue
React styled-components v5 (2020 edition)
Introduction
Before you start this course
Introduction to React styled-components (2:58)
Comparing other CSS-in-JS libraries (3:55)
Installing styled components + relevant plugins and tips (5:03)
Basics of styled-components
Creating our first React styled-component (7:28)
Adding global styles using createGlobalStyle + adding Google fonts (3:20)
Conditional styles based on props (3:05)
How styled components works "under the hood" (3:11)
Bulk styles using the styled-components "css" helper (3:10)
Building out our app - layout & header
Installing react-router-dom and adding our home and login routes (2:34)
Creating the page layout and header components (6:27)
Styling normal React components + extending existing styled component styles (9:43)
Styling links based on routes (with useLocation hook from react-router-dom) (1:19)
Media queries using styled components (5:06)
useState React hook with menu icon + event handlers with styled-components (5:55)
Building out our app - login page
Creating the Input styled component (6:47)
Creating a PasswordInput styled component with the attrs helper (5:06)
Implementing the show / hide password toggle (4:27)
Adding the buttons and loading / submit state to the form (8:24)
Animation with styled components using the keyframes helper (loading spinner) (4:25)
Variables & theming with styled components and styled-theming
Themes and variables basics (3:00)
Creating the theme toggle styled component (4:40)
Finishing the toggle theme with useContext and ThemeContext (5:05)
Updating GlobalStyles and menus to use theme colors (3:18)
Advanced
Referencing a styled component within another styled component (3:50)
Interpolating functions to clean up style logic (1:56)
Using PropTypes with styled components (3:14)
Referencing a styled component within another styled component
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock