How to use CSS in React?

In React, you can use CSS in several ways to style your components. Here are the common approaches:

Table of Contents

1. Inline Styles:

React allows you to define styles directly in your components using JavaScript objects. This approach is known as inline styles.

import React from 'react';

const MyComponent = () => {
  const styles = {
    color: 'blue',
    fontSize: '16px',
    fontWeight: 'bold',
  };

  return (
    <div style={styles}>
      This is a React component with inline styles.
    </div>
  );
};

export default MyComponent;

2. CSS Modules:

CSS Modules is an approach that allows you to write modular and scoped CSS for your React components. Each CSS file becomes a module, and you can import specific styles into your React components.

Install a CSS Modules compatible loader, such as style-loader and css-loader.

   npm install style-loader css-loader --save-dev

Create a CSS file (e.g., styles.module.css):

   /* styles.module.css */
   .myComponent {
     color: red;
     font-size: 18px;
   }

Use the styles in your React component:

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

   const MyComponent = () => {
     return (
       <div className={styles.myComponent}>
         This is a React component with CSS Modules.
       </div>
     );
   };

   export default MyComponent;

3. Styled Components:

Styled Components is a popular library for styling React components. It allows you to write CSS directly in your JavaScript files using tagged template literals.

Install styled-components:

   npm install styled-components

Use Styled Components in your React component:

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

   const StyledDiv = styled.div`
     color: green;
     font-size: 20px;
   `;

   const MyComponent = () => {
     return (
       <StyledDiv>
         This is a React component with Styled Components.
       </StyledDiv>
     );
   };

   export default MyComponent;

Choose the approach that best fits your project and coding style. Each has its advantages and is suitable for different use cases.

We can use CSS in React like HTML CSS, inline CSS or external CSS.

in React inline CSS we use similar to javascript object notation. it mean React inline CSS are written in Curly braces.

Example

{{color:red,backgroundColor:blue}}

React inline CSS uses javascript object notation so in inline React CSS camelSyntax we use instead of regular syntax of CSS like background-color

Example of inline CSS in React Component

class Inlinecss extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{backgroundColor: "lightblue"}}>inline style</h1>
      <p>inline css</p>
      </div>
    );
  }
}

Javascript object notation for React CSS in Component

class Css extends React.Component {
  render() {
    const  style = {
      color: "white",
      backgroundColor: "blue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={style}>inline style</h1>
      <p>inline style with javascript object</p>
      </div>
    );
  }
}
\

React CSS Stylesheet

jus create a .css extension file like Css.css and add the below style

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

Now import .css file in React Component

import React from 'react';
import ReactDOM from 'react-dom';
import './Css.css';

class Css extends React.Component {
  render() {
    return (
      <div>
      <h1>hello external css</h1>
      </div>
    );
   
}}

ReactDOM.render(<Css />, document.getElementById('root'));

React CSS in Module ?

Css in React can also be used through a module

just use .module.css like the module file name is mystyle.module.css

and add the given CSS

.blue {
  color: blue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

Now import mystyle.module.css in React Component

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './mystyle.module.css'; 

class Modulecss  extends React.Component {
  render() {
    return <h1 className={styles.blue}>hello module css</h1>;
  }
}

export default Modulecss  ;

now import the React Component into the Application

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Modulecss   from './App.js';

ReactDOM.render(<Modulecss   />, document.getElementById('root'));

1. Inline Styles:

2. CSS Modules:

3. Styled Components:

Leave a Comment Cancel reply