Styling in React

There are a ton of options offered, unfortunately unately no one is better than the other to use for an existing project (you will have some major refactoring work to do). I have listed some of the most popular and easy to learn ways to style your application, also remember that you don’t have to choose one in particular, you can also mix between these.

Inline styling
The most basic way to style React components is to write the style as attributes and pass them into an element by typing style={{ …. }}, separating each style with a comma. Since it sounds like you have a lot of components, to make the code cleaner you can create a style object variable, either in the same file or in a separate file to make the code cleaner. In this way, we can also reuse the styles across multiple components by exporting them.

Styled components
The other option is to write actual CSS in the JS file, this means that you can use all features of CSS (media queries, nesting, etc). Styled components is a package you need to install, with this you can create reusable React components that have your style attached to it. For example, instead of having a div-tag for your header with className=”header” you create a tag component with your defined styling.

CSS Modules
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default, this means that I know for sure that no global styles will interfere with my work. In a typical CSS file, all CSS selectors live in the global scope, this is not the case here. So you import an object from your CSS file and then you can assign your different components the styles, using different objects on the same style to make sure you style only that specific component.

Tailwind CSS
If you don’t want to write your own CSS, Tailwind is the way to go. Tailwind is no Ui kit like Bootstrap, it doesn't have a default theme or built-in Ui components. Instead, it comes with pre-designed widgets you can use to build your site from scratch. In this way, you can still customize it in any way you like. Similar to CSS modules you also don’t have to worry about changes to one element that will affect another related element.