What are the different ways to style a React component?

There are several ways to style React components. Here are some of the most common methods, each with a brief example:

1. Inline Styles

You can apply inline styles directly to elements in React using the style attribute. The styles are passed as an object where the property names are camelCased.

Example:

function InlineStyleComponent() {
  return (
    <div style={{ backgroundColor: 'lightblue', padding: '20px', textAlign: 'center' }}>
      <h1 style={{ color: 'darkblue' }}>Inline Styling in React</h1>
    </div>
  );
}

Output:

A div with a light blue background, centered text, and a dark blue header.

2. CSS Stylesheets

You can write traditional CSS in an external stylesheet and import it into your component.

Example:

styles.css:

.container {
  background-color: lightcoral;
  padding: 20px;
  text-align: center;
}

.title {
  color: darkred;
}

Component.js:

import './styles.css';

function CSSStylesheetComponent() {
  return (
    <div className="container">
      <h1 className="title">CSS Stylesheet in React</h1>
    </div>
  );
}

Output:

A div with a light coral background and a dark red header.

3. CSS Modules

CSS Modules are scoped to the component where they are imported, preventing name clashes in large applications.

Example:

Component.module.css:

.container {
  background-color: lightgreen;
  padding: 20px;
  text-align: center;
}

.title {
  color: darkgreen;
}

Component.js:

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

function CSSModulesComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>CSS Modules in React</h1>
    </div>
  );
}

Output:

A div with a light green background and a dark green header, scoped only to this component.

4. Styled Components

Styled Components is a library that allows you to write actual CSS in your JavaScript by utilizing tagged template literals.

Example:

import styled from 'styled-components';

const Container = styled.div`
  background-color: lightyellow;
  padding: 20px;
  text-align: center;
`;

const Title = styled.h1`
  color: darkorange;
`;

function StyledComponentsExample() {
  return (
    <Container>
      <Title>Styled Components in React</Title>
    </Container>
  );
}

Output:

A div with a light yellow background and a dark orange header.

5. Sass/SCSS

Sass is a preprocessor scripting language that is interpreted or compiled into CSS. You can use .scss or .sass files with React by configuring a Sass loader or using tools like Create React App, which supports Sass out of the box.

Example:

styles.scss:

$bg-color: lightpink;
$text-color: darkmagenta;

.container {
  background-color: $bg-color;
  padding: 20px;
  text-align: center;

  .title {
    color: $text-color;
  }
}

Component.js:

import './styles.scss';

function SCSSExample() {
  return (
    <div className="container">
      <h1 className="title">Sass/SCSS in React</h1>
    </div>
  );
}

Output:

A div with a light pink background and a dark magenta header.

6. CSS-in-JS (Emotion, JSS)

CSS-in-JS libraries like Emotion or JSS allow you to write CSS directly within your JavaScript files, similar to styled-components but with more flexibility in terms of themes and dynamic styling.

Example with Emotion:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const containerStyle = css`
  background-color: lightgray;
  padding: 20px;
  text-align: center;
`;

const titleStyle = css`
  color: darkgray;
`;

function EmotionExample() {
  return (
    <div css={containerStyle}>
      <h1 css={titleStyle}>Emotion in React</h1>
    </div>
  );
}

Output:

A div with a light gray background and a dark gray header.

7. Tailwind CSS

Tailwind is a utility-first CSS framework that allows you to apply styles directly via class names.

Example:

function TailwindExample() {
  return (
    <div className="bg-blue-200 p-5 text-center">
      <h1 className="text-blue-700">Tailwind CSS in React</h1>
    </div>
  );
}

Output:

A div with a light blue background and a blue header, using Tailwind utility classes.

These methods offer a range of flexibility depending on the complexity of your styling needs, from simple inline styles to advanced CSS-in-JS solutions.