CSS in React

There are many ways to style a React application, and there are lengthy debates about the best styling strategy and styling approach. We’ll go over a few of these approaches without giving them too much weight. There will be some pro and con arguments, but it’s mostly a matter of what fits best for developers and teams.

We will begin React styling with common CSS in React, but then explore two alternatives for more advanced CSS-in-CSS (CSS Modules) and CSS-in-JS (Styled Components) strategies. CSS Modules and Styled Components are only two approaches out of many in both groups of strategies. We’ll also cover how to include scalable vector graphics (SVGs), such as a logo or icons, in our React application.

If you don’t want to build common UI components (e.g. button, dialog, dropdown) from scratch, you can always pick a popular UI library suited for React, which provides these components by default. However, it is better for learning React if you try building these components before using a pre-built solution. As a result, we won’t use any of the UI component libraries.

The following styling approaches and SVGs are pre-configured in create-react-app. If you’re in control of the build tools (e.g. Webpack), they might need to be configured to import CSS or SVG files. Since we are using create-react-app, we can use these files as assets right away.

Cascading Style Sheet (CSS)

Common CSS in React is similar to the standard CSS you may have already learned. Each web application gives HTML elements a class (in React it’s className) attribute that is styled in a CSS file later.