Our Blog:

React is a popular JavaScript library that facilitates the creation of interactive user interfaces. While the core library doesn't provide a specific method to manage styles, several methods have evolved in the React ecosystem. This article will provide an overview of the most commonly used styling techniques and tools in React applications.

Inline Styles

The simplest way to add styles to your React components is to use inline styles. This involves passing a JavaScript object to the style prop of your components. Each key in this object is a CSS property in camelCase, and its value is the CSS value you want to apply.

function MyComponent() {
  return <div style={{ color: 'red', fontSize: '20px' }}>Hello, world!</div>;
}

However, this method has some limitations. It doesn't support media queries, pseudo-selectors, or other advanced CSS features. Also, sharing styles across different components can be difficult.

CSS Modules

To mitigate the drawbacks of inline styling, you might consider using CSS Modules. A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. This approach eliminates the risk of class name conflicts across different files.

/* MyComponent.module.css */
.container {
  color: red;
  font-size: 20px;
}

import styles from './MyComponent.module.css';

function MyComponent() {
  return <div className={styles.container}>Hello, world!</div>;
}

SCSS and SCSS Modules

SCSS is a CSS preprocessor that adds many useful features like variables, mixins, nesting, and more. SCSS code needs to be compiled into standard CSS before it can be used in a webpage.

To use SCSS in a React application, you typically set up a build process (like one provided by Create React App or Next.js) that compiles your SCSS code into CSS when you save your files. Here's an example of how you might use SCSS in a component:

/* Button.module.scss */
.primaryButton {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 18px;

  &:hover {
    background-color: #0069d9;
  }
}

.secondaryButton {
  background-color: #6c757d;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 18px;

  &:hover {
    background-color: #5a6268;
  }
}

import React from 'react';
import styles from './Button.module.scss';

function Button({ primary, children }) {
  const buttonClass = primary ? styles.primaryButton : styles.secondaryButton;
  return <button className={buttonClass}>{children}</button>;
}

export default Button;

Just like with CSS Modules, you can use SCSS Modules to locally scope class. This way, you get all the benefits of SCSS (like variables, mixins, and nesting), and you also don't need to worry about class name collisions.

Styled-components

Styled-components is a library for React and React Native that lets you use component-level styles in your application written with a blend of JavaScript and CSS.

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${(props) => (props.primary ? '#007BFF' : '#6C757D')};
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 18px;

  &:hover {
    background-color: ${(props) => (props.primary ? '#0069D9' : '#5A6268')};
  }
`;

function MyComponent() {
  return (
    <div>
      <StyledButton primary>Primary Button</StyledButton>
      <StyledButton>Secondary Button</StyledButton>
    </div>
  );
}

export default MyComponent;

This library supports all CSS features, including nesting, media queries, and pseudo-classes. Furthermore, it generates unique class names for your styles, avoiding naming collisions.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework, offering low-level utility classes to construct custom designs. Rather than delivering a set of predefined components, it presents small utility classes that allow the creation of unique designs.

import React from 'react';

function Button({ primary, children }) {
  const buttonClass = primary
    ? 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'
    : 'bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded';
  return <button className={buttonClass}>{children}</button>;
}

export default Button;

The main advantage of Tailwind CSS is its flexibility. Since it's utility-first, it doesn't impose a specific look and feel on your application. It also encourages consistency and reduces the size of your CSS.

CSS-in-JS Libraries

In addition to styled-components, many other CSS-in-JS libraries like Emotion or JSS exist. These libraries aim to solve CSS problems by leveraging the power of JavaScript.

import { css } from '@emotion/react';
import React from 'react';

function Button({ primary, children }) {
  return (
    <button
      css={css`
        background-color: ${primary ? '#007BFF' : '#6C757D'};
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        font-size: 18px;
        &:hover {
          background-color: ${primary ? '#0069D9' : '#5A6268'};
        }
      `}
    >
      {children}
    </button>
  );
}

export default Button;

Conclusion

There are various ways to style React applications, each with its advantages and trade-offs. The best method depends on your project and team requirements. I don't suggest using Inline styles on any project. CSS Modules can be suitable for simple applications, while SCSS Modules, styled-components, Emotion, or JSS may be more suitable for complex applications. In my personal preferences I use SCSS Modules on main app and styled-components in component libraries. Alternatively, Tailwind CSS can provide flexibility and reduce the size of your CSS.

Explore different methods and decide which one best suits your use case. Happy coding!