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 Radium, 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 the downsides
- How the Radium library can help fix issues of inline styles
- 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...