रिएक्ट में सीएसएस मॉड्यूल स्वचालित रूप से अद्वितीय वर्ग नाम उत्पन्न करके सीएसएस का दायरा बढ़ाने का एक तरीका है। यह बड़े अनुप्रयोगों में वर्ग नाम टकराव को रोकता है और मॉड्यूलर शैलियों की अनुमति देता है। यहां बताया गया है कि आप रिएक्ट प्रोजेक्ट में सीएसएस मॉड्यूल का उपयोग कैसे कर सकते हैं:

1. सेटअप

डिफ़ॉल्ट रूप से, रिएक्ट सीएसएस मॉड्यूल का समर्थन करता है। आपको बस अपनी सीएसएस फ़ाइल को एक्सटेंशन .module.css के साथ नाम देना होगा।

2. उदाहरण सेटअप

फ़ाइल संरचना:

src/
├── components/
│   ├── Button.js
│   ├── Button.module.css

बटन.मॉड्यूल.सीएसएस:

.button {
  background-color: #6200ea;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #3700b3;
}

बटन.जेएस:

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

const Button = () => {
  return (
    
      Click Me
    
  );
}

export default Button;

यह काम किस प्रकार करता है:

• Button.module.css: आप किसी भी सामान्य सीएसएस फ़ाइल की तरह सीएसएस नियमों को परिभाषित करते हैं।
• styles.button: सीएसएस मॉड्यूल से क्लास नाम एक जावास्क्रिप्ट ऑब्जेक्ट के रूप में आयात किए जाते हैं। आप style.className का उपयोग करके उनका संदर्भ देते हैं।

फ़ायदे:

• स्कोप्ड शैलियाँ: नाम टकराव से बचते हुए, प्रत्येक वर्ग को स्थानीय रूप से घटक के दायरे में रखा जाता है।
• रखरखाव: जैसे-जैसे आपका एप्लिकेशन बढ़ता है, आपका सीएसएस मॉड्यूलर बना रहता है और प्रबंधन करना आसान हो जाता है।

यदि आपको विशिष्ट मामलों में सहायता की आवश्यकता हो तो मुझे बताएं!