😅Styling React Components with CSS Modules

CSS Modules generate unique class names for each component, preventing style leakage and conflicts between different components. This ensures that styles are scoped to the specific component.

Tutorial Video

1. Create a CSS file name - "style.module.css"

/* style.module.css */

/* Heading style */
.Heading {
  color: blue;
  font-size: 24px;
}
/* Heading style */

/* Bold style */
.Bold {
  font-weight: bold;
}
/* Bold style */

/* style.module.css */

1. Import the file on your react component.

import style from "./style.module.css"

1. Now use className in following format

<div className={style.Heading} > 
// YourReactComponent.jsx

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

const YourReactComponent = () => {
  return (
    <div className={style.Heading}>
      <h1>Trying out CSS Module</h1>
    </div>
  );
};

export default YourReactComponent;

If you want to use multiple className : Use this format.

<div className={`${style.Heading} ${style.Bold}`}>