In Exercise 09 we learned how to create and use CSS files. But, most of the developers use UI frameworks to make their life easier. Using a UI framework like Chakra UI in combination with Next.js will supercharge your feature development and make the styling of your app even easier.
Frameworks like Chakra UI utilize the React Context API to configure your web app's theme and ensure consistent styles. As we mentioned in the Exercise 07, we can override the App component to persist layout between page changes and inject additional data into pages. That's where we can add the ChakraProvider. Chakra UI also comes with a ColorModeScript specifically built for Next.js that we need to put in our custom Document, which we learned how to override in Exercise 08.
Configure Chakra UI in your project.
This exercise marks the third checkpoint at which we'll go into breakout rooms to do the following exercises:
- Exercise 07: Override the App Component
- Exercise 08: Override the Document
- Exercise 09: Create custom style
- Exercise 10: Create custom layout
- Exercise 11: Use UI frameworks like Chakra UI
Start with the first exercise, and work your way through the last one. If you're stuck, do not hesitate to ask. As soon as you're done you can fill out either the Post-Breakout Feedback Form, or the feedback forms for each individual exercise. I would appreciate your feedback a lot.
Writing down what you learn is key to your retention. Also, I want to make sure each exercise is effective at helping you learn the material. Please quickly fill out this form so you can elaborate on what you learned and give me feedback so I can improve it for future learners.