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 into the magical world of CSS in JavaScript.
The topic is very hot and highly controversial, so this chapter requires an open mind in order to be understood and followed.
In this chapter, we will cover the following:
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...