From the course: Learning Next.js
Join today to access over 22,800 courses taught by industry experts or purchase this course individually.
Styling Next.js with styled JSX
- [Instructor] The next JS library includes a style JSX tag by default, in order to allow to write encapsulated and scoped CSS to style a component specifically. So we're going to use these default style JSX tags to include before the closing tag of every component to target this one specifically with some CSS rules. For example, in this home component we would allow to target every component with the color blue, but for this component only. It's not going to be global. So let's use the example that we've been using so far. So for now, we're using this color for the home component specifically. We have a color for the heading for every component. And also for the not found page, so when you write something that you know does not exists. We're using the same color setting across the application, which is applied in the globals.css. So we're using the same CSS rules, which is implemented in the globals.css. So maybe we would…
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.