How to Add Style in ReactJS App

Styling your React app can be done in various ways, each with its own benefits and use cases. Here are some of the most common methods to style a React application:

1. CSS Stylesheets

The most traditional way to style your React app is by using plain CSS stylesheets.

Step 1. Create a CSS File

Create a CSS file (e.g., App.css).

/* App.css */
.container {
  text-align: center;
  padding: 20px;
}

.title {
  font-size: 24px;
  color: blue;
}

Step 2. Import the CSS File

Import the CSS file in your React component.

// App.js
import React from 'react';
import './App.css';

const App = () => (
  <div className="container">
    <h1 className="title">Hello, World!</h1>
  </div>
);

export default App;

2. CSS Modules

CSS Modules are a way to locally scope CSS by automatically generating unique class names. This helps avoid class name conflicts.

Step 1. Create a CSS Module

Create a CSS Module file (e.g., App.module.css).

/* App.module.css */
.container {
  text-align: center;
  padding: 20px;
}

.title {
  font-size: 24px;
  color: green;
}

Step 2. Import the CSS Module

Import the CSS Module in your React component and use the styles.

// App.js
import React from 'react';
import styles from './App.module.css';

const App = () => (
  <div className={styles.container}>
    <h1 className={styles.title}>Hello, World!</h1>
  </div>
);

export default App;

3. Inline Styles

Inline styles are defined directly on the elements. This method is good for dynamic styling and simple use cases.

// App.js
import React from 'react';

const App = () => {
  const containerStyle = {
    textAlign: 'center',
    padding: '20px'
  };

  const titleStyle = {
    fontSize: '24px',
    color: 'red'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Hello, World!</h1>
    </div>
  );
};

export default App;

4. Styled Components

Styled Components is a popular library for writing CSS in JS. It allows you to style components using tagged template literals.

Step 1. Install Styled Components

npm install styled-components

Step 2. Create Styled Components

Create styled components in your React component.

// App.js
import React from 'react';
import styled from 'styled-components';

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

const Title = styled.h1`
  font-size: 24px;
  color: purple;
`;

const App = () => (
  <Container>
    <Title>Hello, World!</Title>
  </Container>
);

export default App;

5. CSS-in-JS Libraries

CSS-in-JS libraries like Emotion and JSS offer advanced styling capabilities.

Step 1. Install Emotion

npm install @emotion/react @emotion/styled

Step 2. Use Emotion for Styling

// App.js
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

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

const Title = styled.h1`
  font-size: 24px;
  color: teal;
`;

const App = () => (
  <div css={containerStyle}>
    <Title>Hello, World!</Title>
  </div>
);

export default App;

6. Using a UI Framework

You can use UI frameworks like Bootstrap, Material-UI, or Ant Design, which provide pre-styled components and utility classes.

Step 1. Install Material-UI

npm install @mui/material @emotion/react @emotion/styled

Step 2. Use Material-UI Components

// App.js
import React from 'react';
import { Container, Typography } from '@mui/material';

const App = () => (
  <Container style={{ textAlign: 'center', padding: '20px' }}>
    <Typography variant="h1" color="primary">
      Hello, World!
    </Typography>
  </Container>
);

export default App;

Summary

Each styling method has its own advantages:

• CSS Stylesheets: Simple and traditional.
• CSS Modules: Scoped CSS to avoid conflicts.
• Inline Styles: Good for dynamic styles.
• Styled Components: Powerful CSS-in-JS solution.
• CSS-in-JS Libraries: Advanced styling capabilities.
• UI Frameworks: Pre-styled components and utility classes.

Choose the method that best fits your project's needs and complexity.