Introduction

Styling a React app can be a challenging task, especially if you're building a complex application with many different components. There are a wide range of tools and techniques available to achieve this, and choosing the right one can depend on the specific needs of your project.

In this article, we'll explore some of the different ways you can style a React app. We'll look at inline styles, traditional CSS stylesheets, and utility-first CSS frameworks, and discuss the pros and cons of each approach. We'll also explore some of the tools and techniques you can use to make styling your React app easier, such as CSS-in-JS libraries and CSS Modules.

This article assumes three things:

• You know how to use React or at least have a basic idea of how to write JSX.

• You're using either create-react-app or vite to bootstrap your React project. This is because these technologies automatically install the necessary boilerplate dependencies on which some of the frameworks listed here depend.

• You know how to use regular CSS.

Inline Styles

Inline styles allow you to apply styles directly to a specific element, rather than using a separate stylesheet. Inline styles are defined as JavaScript objects, with keys representing the CSS property names and values representing the corresponding CSS property values.

function App() {
    return (
        <div style={{color: 'blue', backgroundColor: 'fff'}}>
            This text is blue with a with background.
        </div>
    );
}

In the example above, the style prop is set to an object with two properties: color and backgroundColor with their respective values. These properties are applied to the div element, causing the text inside the element to be displayed in blue with a white background.

Notice that the background color was declared as backgroundColor instead of background-color, this is because - (dash) in JavaScript is treated as a subtraction symbol. Therefore, inline styles use camel cases for declaring properties. If you prefer using the regular CSS pattern, you need to wrap the property name in quotes, e.g: 'background-color'.

You can also use variables to define inline styles in React:

const textColor = 'blue';
const backgroundColor = 'fff';

export default function App() {
    return (
        <div style={{color: textColor, backgroundColor: backgroundColor}}>
            This text is blue with a white background.
        </div>
    );
}

In this example, the values of the textColor and backgroundColor variables are used as the values of the color and backgroundColor properties of the inline style object respectively.

Using Objects

You can extend this further by declaring the styles inside a JavaScript object and passing the object as a value to the style prop.

const divStyles = {
    backgroundColor: 'white',
    color: 'darkblue',
    fontSize: '1.8rem',
    padding: '1rem',
    };

export default function App() {
    return (
        <div style={divStyles}>
            This text is darkblue with a white background.
        </div>
    );
}

Advantages

• Easy to Use: They allow you to apply styles directly to a specific element, which can be useful in cases where you only want to style a single element or a small number of elements.

• Dynamic Values: Inline styles are defined using JavaScript syntax, which means you can use variables and other dynamic values to control the styles applied to an element. This can be very useful when declaring dynamic styles like color themes, etc.

Drawbacks

• Maintainability: They can be hard to read and maintain, especially if you have a large number of inline styles or if your inline styles are complex.

• Reusability: They make it harder to reuse styles across multiple elements or components.

• Functionality: They have limited functionality compared to styles defined in a separate stylesheet. For example, they cannot include selectors or use pseudo-classes like :hover, etc.

• Optimization: They make it harder to optimize the performance of your application, as the styles are applied directly to the DOM rather than being cached in a separate stylesheet.

CSS-In-JSX: Styled Components

Styled Components is a library that allows you to create and style React components in a declarative way, using a syntax that resembles regular CSS. This makes it easy to manage the styles for a large application, as the styles are scoped to a specific component and you don't have to worry about naming conflicts.

To use Styled Components in React, you will need to install the library and save it as a dependency. You can do this by running the following command in your terminal:

npm install --save styled-components

Once you have the library installed, you can create a styled component like this:

import styled from 'styled-components';

const Button = styled.button`
    background-color: blue;
    color: white;
    font-size: 1.8rem;
    padding: 1rem;
    border-radius: 0.5rem;

    &:hover {
        background-color: transparent;
        border: 2px solid blue;
    }
    `;

The styled function creates a new component that is styled according to the CSS rules provided. In the example above, the Button component is a styled button element that has a blue background and a white text.

You can now use the Button component like any other component in your application.

import Button from './Button';

export default function App() {
    return (
        <Button>Click here</Button>
    );
};

In the example above, the Button component will be rendered as a styled button element with the declared styles.

To learn more about Styled Components including more advanced concepts, you can read the documentation.

Advantages

There are many reasons why lots of developers love Styled Components. Here are some of the advantages it provides:

• Modularity: Styled Components allow you to write and manage the styles for each component in a modular way, which makes it easier to maintain and scale your application.

• Reusability: You can reuse styled components across your application, which makes it easier to maintain a consistent design.

• Maintainability: Because the styles are locally scoped, you don't have to worry about naming conflicts or global styles affecting your components.

• Dynamic Styling: You can use props to style your components dynamically, which allows you to create more flexible and customizable components.

Drawbacks

Using Styled Components has several advantages, some of which are listed above, but it also has some drawbacks that you should consider before deciding to use it in your application.

• Increased Bundle Size: Using Styled Components can increase the size of your bundle, as the library adds additional code to your application. This can make your application slower to load and may not be suitable for applications that need to be lightweight.

• Limited Browser Support: It relies on advanced CSS features that are not supported by older browsers.

• Extra Dependency: Using Styled Components adds an extra dependency to your application, which means that you will have an extra library to maintain in your project.

CSS Stylesheet

CSS stylesheets are the traditional way of applying styles to a web application. To use a stylesheet within a React component, you need to import it inside the component.

// import the stylesheet
import './Button.css';

export default function Button() {
    return (
        <button className='btn'>Click here</button>
    );
};

In the example above, by importing the stylesheet at the top of the component, the CSS declarations defined in Button.css will be applied to the component.

Note: all styles declared using this method are scoped globally, meaning that any styles declared in Button.css for the btn class above will be applied to all elements that have a btn class.

Advantages

• Reusability: since all styles are globally scoped, it reduces the need to write boilerplate styles and makes it very easy to implement the DRY (Don't Repeat Yourself) principle in your application.

• Familiarity/Ease of Usage: This method is very easy to adopt in a team because it uses regular CSS syntax which every web developer is familiar with. This can be useful in a team that includes junior developers since they are already familiar with it.

Drawbacks

• Maintainability: Because of the global scope of CSS stylesheet, it can be extremely difficult to maintain and debug your stylesheet since styles declared in different components can affect the appearance of an element.

• Naming Conflict: It requires setting unique class names for all elements within the entire application to prevent styles from overwriting each other because of the global scope. This can be very tedious in a large application and even result in declaring nonhuman-readable class names.

CSS Modules

According to the documentation:

CSS Modules work by compiling individual CSS files into both CSS and data. The CSS output is normal, global CSS, which can be injected directly into the browser or concatenated together and written to a file for production use. The data is used to map the human-readable names you've used in the files to the globally-safe output CSS.

In other words, CSS Modules creates a local scope for your stylesheet, thereby making it possible to reuse class names in multiple files without clashes since each class name is given a unique programmatic name.

A CSS Module stylesheet is very similar to a regular stylesheet, only with a different extension (e.g. styles.module.css).

// import the stylesheet
import style './Button.module.css';

export default function Button() {
    return (
        <button className={style.button}>Click here</button>
    );
};

This article provides an in-depth explanation of CSS Modules.

Advantages

• Local Scope: By using CSS Modules, namespace conflicts for CSS classes are avoided. Multiple CSS files may contain the same CSS class.

• Easy to Maintain: One of the key benefits of using CSS Modules is that you may edit any CSS file with assurance and without concern for how it would affect other components.

• Easy to Understand: Despite the project’s complexity, CSS Modules make your code look tidy so that other developers can read and comprehend it.

Drawbacks

• Styles must be included as an object with a dot or bracket notation when integrating into a project.

• Unlike Styled Components, CSS Modules don’t accept props, therefore it can be a bit complicated to declare dynamic styles

• To use global styles when using CSS Modules, you need to import the style or pass it as a prop to all components that need to use it, this can easily result in a cluttered codebase if you need to reuse multiple style declarations.

Utility Classes: Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows you to build custom designs without having to write a lot of custom CSS. It provides a set of low-level utility classes that you can use to style your JSX components. Instead of writing complex styles from scratch, you can use these utility classes to quickly apply styles to your elements.

To use Tailwind CSS in a React application, you will need to install the appropriate dependencies and configure your build process to support it:

Install tailwindcss via npm, and then run the init command to generate your tailwind.config.js file.

npm install -D tailwindcss
npx tailwindcss init

Add the paths to all of your template files in your tailwind.config.js file

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the directives for each of Tailwind’s layers to your ./src/index.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

You can now use Tailwind in your application.

export default function App() {
  return (
    <div className="container mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10">
      <p className="text-3xl text-gray-700 font-bold mb-5">
        Welcome!
      </p>
      <p className="text-gray-500 text-lg">
        Using Tailwind CSS in React
      </p>
    </div>
  );
}

To learn more about the different utility classes and all the amazing features of Tailwind CSS, you can read the documentation here.

Advantages

• Speed: Tailwind CSS allows you to build custom designs quickly and easily. Instead of having to write a lot of custom CSS, you can use the utility classes provided by Tailwind CSS to style your elements. This can save you a lot of time and effort when building your app.

• Customization: Tailwind CSS provides a wide range of utility classes that you can use to style your elements. This allows you to easily customize the look and feel of your app without having to write a lot of custom CSS.

• Responsive design: Tailwind CSS provides utility classes for responsive design, making it easy to create layouts that look great on all devices.

Drawbacks

• More complex class names: The utility class names in Tailwind CSS can be longer and more complex than those in traditional CSS frameworks. This can make it more difficult to read and understand the styles being applied to your elements.

• Limited design options: Tailwind CSS provides a lot of flexibility in terms of styling elements, but it may not be suitable for more complex design systems or layouts. If you need more advanced design capabilities, you may need to use a different CSS framework or write more custom CSS.

• Requires configuration: Tailwind CSS requires you to set up a configuration file and configure your build process to use it. This can be a bit more complex than using a traditional CSS framework and may require more setup time.

Conclusion

In conclusion, there are different ways to style a React app, each with its own set of pros and cons. Traditional CSS frameworks provide a wide range of pre-designed styles that can be easily applied to your app but may not offer as much flexibility as other approaches. Utility-first CSS frameworks allow you to quickly apply styles to your elements using low-level utility classes but may result in larger CSS files and more complex class names. Inline styles allow you to apply styles directly to your elements but can be more difficult to manage and maintain. CSS-in-JS libraries and CSS Modules offer a way to manage styles within your JavaScript code but may require a different way of thinking about styling your app.

Ultimately, the right approach for styling your React app will depend on your specific needs and preferences. By understanding the different options available, you can choose the approach that works best for your project.