Different ways to style components and elements in React

Changing the appearance of elements and components in React is the key to creating user-friendly web apps in React. In this article, we will explore a number of different ways to style elements in React. Specifically, how to use Tailwind, CSS-in-JS, modules, and libraries to customize the element appearance.

Each different way of styling an element has its pros and cons. In this article, we will explore every option and cover everything you need to know.

Writing CSS without libraries

In React, there are essentially two ways to use CSS without libraries. The normal approach is to create a CSS file with all the styles and rules. Syntax for writing these files is similar to writing normal HTML code. Usually it is one file for every component, but it’s also possible to create one file for the entire application. Rules specified in the CSS file will extend to every element in the component tree.

This approach is fine for small projects. It becomes difficult to manage if the application is built for mass market use. It’s difficult to style a complex web application with just plain CSS. There are too many pages and small components that need to have the right look. It becomes difficult to write the CSS code, and sometimes such advanced styles are also difficult to plan ahead of time.

Another approach is to use CSS-in-JS. In other words, use the ability to embed JavaScript expressions inside JSX and set style attribute to an object where key-value pair represents a CSS property and its value. This is a pretty straightforward approach, and features like ternary operator allow you to apply conditional styles as well. Sometimes you can even chain multiple conditions for adding a specific style. You can also do string interpolation in JSX. This is a great JavaScript feature for writing dynamic strings.

CSS-in-JS is kind of new, but all the CSS properties and values are the same. Only syntax is different, and this approach supports logic.

Once again, inline styles are difficult to scale. Even for small applications, it may be a good idea to use conditional className values instead.

Advantages

• Most developers are already familiar with plain CSS, so there isn’t much learning curve involved. Sure, you need to know how CSS rules affect component trees, but that doesn’t take much time to get used to. Other than its component-based nature, using plain CSS to style React is a very familiar experience.

• All browsers support CSS and most of its properties. Newer CSS properties and rules are quickly being adopted as well.

• Finally, styling in CSS is very lightweight. It is the foundation for styling web applications designed for browsers. So animations and the custom appearance is a seamless process optimized for using CSS.

Disadvantages

• Developers need practice to effectively use CSS to style outlier elements and components. Due to their global scope, general files are unpredictable, especially in large applications. Styling web applications becomes difficult due to naming conflicts and inherited styles that become difficult to manage.

• Both inline styles and big CSS files are difficult to reuse. As a library, React is centered around the idea of reusable components. Building web apps in react also requires a scalable way to expand styles to various elements and components.
  Unfortunately, inline styles in React are one-off and can not be reused.

CSS modules

CSS modules can solve many development challenges of using plain CSS. Instead, stylesheets will be modular, in other words, scoped to specific component files. Generic names for the classes will be transformed into unique names upon compilation. This makes it easier to choose better, more descriptive class names and not worry about accidentally overriding CSS rules.

For CSS modules to work, use className attribute, not Class. This way, React will know to map className values to those specified in the module.

Module file names need to have a .module.css suffix to work.

Advantages

• Unique class names are guaranteed to avoid style clashes.
• Unlike big CSS files, modules make it possible to reuse individual styles.
• Components only load CSS rules they use, so they are more efficient.

Disadvantages

• Someone who’s never written CSS modules is going to have a hard time adapting at first. The way styles are distributed between components is different. Syntax is different as well.
• Modules usually require extra time investment up front to configure them for use in the app.

*Tailwind CSS
*

Some JavaScript developers prefer to use utility-first tools like Tailwind CSS. It offers pre-defined classes, so you don’t have to write them and can significantly speed up the development process. Using Tailwind also means having a consistent look in the application. This can be a positive or negative, depending on how you look at it.

Advantages

• Tailwind comes with a bunch of pre-defined classes that allow you to quickly style an application without writing custom styles yourself. This might mean loss in terms of customization, but Tailwind is a great time-saver when you are prototyping.

• If you want customization, Tailwind gives you access to a configuration file where you can change any class and achieve a unique look, while keeping most of its benefits.

• It’s easier to achieve consistent look when using a tool like Tailwind CSS.

Disadvantages

• Using Tailwind CSS sometimes leads to web applications bloated in size.
• Using too many Tailwind classes might make HTML code look messy.
• There are plenty of developers who know Tailwind.css, but most don’t. If a project uses this utility package, then all developers who work on it must be proficient as well. This might make it difficult to find new developers to work on your web application.

Summary

Appearance is very important for building a user-friendly application. In the article above, we discussed several different ways to style web applications built in React, as well as their advantages and disadvantages. Other useful features include set scroll position to a section in React. We hope the blog post was useful in helping you decide how to customize the appearance of React apps.