From the course: Building Modern Projects with React
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Extending styled-components
From the course: Building Modern Projects with React
Extending styled-components
- [Instructor] In a previous video, we added props to our TodoItemContainer styled component to make it display differently depending on whether or not a todo was older than a certain number of days. But here's the thing, currently we're displaying that on all of our todos, the incomplete and the completed. Wouldn't it make more sense to only show that custom styling on the incomplete todos? Well, there are really two main ways to do that. One way would be to pass in another completed prop to our TodoItemContainer styled component and use that as an extra condition for applying the red border. And that way is perfectly fine to use, but the other way is the way that I'm going to show you how to use in this video. So before we added this red border logic to our TodoItemContainer styled component, it was just a typical styled component with no special functionality. Now, one way we could go about adding the red border…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.