Styling in React

In React, there are several ways to apply styles to components:

1. Using Global Styles (in HTML)

You can define styles inside a tag in the of your index.html file. This is the traditional way of styling, but it is not recommended in React.

2. Using External CSS Files

You can write styles in a separate .css file and import it into your component.

Example (styles.css):

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

Importing and Using in React (Component.js):

import "./styles.css"; // Import the CSS file

function App() {
  return Hello, World!;
}
  • You should import the CSS file in the same file where you define the component. This keeps styles scoped to the component and makes the project more organized.
  • If the CSS file contains global styles (e.g., resetting margins, font styles, or general layout), then it should be imported in App.js or index.js.

3. Using Inline Styles (style={{}})

React allows inline styles using the style attribute, but instead of a regular CSS string, it takes an object.

Rules for inline styles:

  • CSS properties are written in camelCase (e.g., background-color becomes backgroundColor).
  • Values are written as strings or numbers (without px for unitless values like lineHeight).
  • Useful for dynamic styles but not recommended for large projects because it makes components harder to read.

Example:

function App() {
  return Hello, World!;
}

4. Using JavaScript Style Objects

Instead of defining styles directly inside JSX, you can create a style object inside your component and pass it to the style attribute.

Example:

function App() {
  const headingStyle = {
    color: "blue",
    fontSize: "24px",
    textAlign: "center",
  };
  return Hello, World!;
}

5. CSS Modules in React

CSS Modules are a scoped styling solution in React that helps avoid style conflicts by localizing CSS to specific components.

Step 1: Create a CSS Module File

Instead of using a regular .css file, create a .module.css file.

Example (Button.module.css):

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: darkblue;
}

Step 2: Import and Use It Inside a React Component

import React from "react";
import styles from "./Button.module.css"; // Import styles as an object

function Button() {
  return Click Me;
}

export default Button;

How It Works:

  • The CSS file is imported as an object (styles).
  • Instead of using "button" as a class name, we use {styles.button}.
  • React automatically generates a unique class name (e.g., Button_button__3xZy8) to prevent conflicts.