Styling React using CSS

React is a famous JS library used for making user interfaces. While React provides a simple way to build components and manage state, styling these components can be a challenge. In this article, we will take a closer look at the different ways to style React components using CSS.

CSS Styling in React

There are several ways to add CSS styles to React components, including:

1. Inline styling:

Inline styling is a simple way to style a single component. You can define styles as a JavaScript object and then pass it as a prop to the component. This method is useful for simple styles, but it can become difficult to maintain as the size of your project grows.

const Header = () => {
  return (
    <>
      <h1 style={{color: "red"}}>Hi, from DataFlair!</h1>
      <p>Showing how to style</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

Output:

2. CSS Stylesheets:

You can also add CSS styles to your React components using stylesheets. This method is recommended when your project grows, as it makes it easier to manage and maintain your styles.

import './Example.css';

const Example = () => (
  <div className="example">This is a tutorial from DataFlair</div>
);

CSS code

.example {
  color: red;
  font-size: 20px;
}

3. Using CSS Modules:

CSS Modules is a technique that allows for locally scoped CSS by automatically generating unique class names for each selector. This helps to prevent naming collisions between CSS classes from different components.

In React, CSS Modules can be used by enabling them with the css-loader package.

To use CSS Modules in a React component, we can create a .module.css file instead of a regular .css file for the component’s styles. This tells the css-loader to use CSS Modules for that file.

Here’s an example of how to use CSS Modules in a React component:
First, we create a file Button.module.css with the following content:

.btn {
  background-color: #3498db;
  color: white;
  padding: 8px 16px;
  font-size: 16px;
}

Next, we import the CSS file and use the generated class names in our component:

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

const Button = ({ children, onClick }) => {
  return (
    <button className={styles.btn} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

The styles object is created by importing the CSS file with the import styles from ‘./Button.module.css’; statement. The btn class from the CSS file is then used as a property of the styles object
Note that the class name used in the CSS file (btn) is not used directly in the component.This helps to ensure that the class name is unique and not accidentally overridden by another component’s styles.

4. CSS-in-JS:

This is a modern approach to styling in React, where you write your styles as JavaScript objects. The advantage of this method is that you can easily style individual components, and your styles will be scoped to that component. There are several popular CSS-in-JS libraries available, including styled-components and emotion.

import styled from 'styled-components';

const Header = () => {
  const myStyle = {
    color: "white",
    backgroundColor: "Red",
    padding: "14px",
    fontFamily: "Sans-Serif"
  };
  return (
    <>
      <h1 style={myStyle}>Hello, from DataFlair!</h1>
      <p>Adding a bit of style!!</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

Output:

Conclusion:

Styling in React can be challenging, but with these different methods, you can easily add styles to your components. The best method to use depends on the size and complexity of your project. Whether you choose inline styling, stylesheets, or CSS-in-JS, React provides a flexible and powerful way to style your components.