Making Your Components Look Beautiful
Our journey into React best practices and design patterns has now reached the point where we want to make our components look beautiful. To do that, we will go through all the reasons why regular CSS may not be the best approach for styling components, and we will check out various alternative solutions.
Starting with inline styles, then CSS modules, and styled-components, this chapter will guide you through the magical world of CSS in JavaScript.
In this chapter, we will cover the following topics:
- Common problems with regular CSS at scale
- What it means to use inline styles in React and their downsides
- How to set up a project from scratch using Webpack and CSS modules
- Features of CSS modules and why they represent a great solution to avoid global CSS
styled-components, a new library that offers a modern approach to styling React components
