This chapter covers
- Making your applications look great
- Evaluating the many ways to add styling
- Exploring three ways to style a component
Creating functional apps is a good start, but ensuring that they look gorgeous as well is going to make users love using your apps. Making HTML websites look good is the job of CSS, which is notoriously different from HTML and JavaScript, which we are using in the world of React.
We will be examining three different ways of styling React applications and evaluating their strengths and weaknesses:
- CSS files and class names
- CSS Modules
- Styled-components
I will cover them in this order, which is their order of complexity and learning curve. The first option requires almost no new knowledge, so you can start right away even if you know only React and CSS. I’ve excluded the most complex options because you would have to read a lot of documentation to start; they use methods and concepts far from regular CSS to achieve a similar result.
But why are there so many ways of styling React and web applications in general? Why don’t all of us developers agree on the best way and stick with that? Well, the “best way” to style a React application is an unsolved problem. A styling solution has many requirements, depending on what you’re building, who’s building it, who your target audience is, and (of course) personal preference and professional sentiments.