CSS in JSX

 In React, JSX (JavaScript XML) is a syntax extension that allows you to write HTML-like code within your JavaScript code. When you use JSX to define your React components, you often need to apply CSS styles to these components to control their appearance. There are a few different ways to add CSS styles to JSX:

रिएक्ट में, JSX (जावास्क्रिप्ट XML) एक सिंटैक्स एक्सटेंशन है जो आपको अपने जावास्क्रिप्ट कोड के भीतर HTML जैसा कोड लिखने की अनुमति देता है। जब आप अपने रिएक्ट घटकों को परिभाषित करने के लिए JSX का उपयोग करते हैं, तो आपको अक्सर इन घटकों की उपस्थिति को नियंत्रित करने के लिए CSS शैलियों को लागू करने की आवश्यकता होती है। JSX में CSS शैलियाँ जोड़ने के कुछ अलग तरीके हैं:

Inline Styles of CSS in JSX :

You can apply CSS styles directly within the JSX elements using the style attribute. The style attribute accepts a JavaScript object where the keys are the CSS properties, and the values are the corresponding property values.

Inline Styles of CSS in JSX : 

आप inline style का उपयोग करके सीधे JSX तत्वों के भीतर CSS शैलियाँ लागू कर सकते हैं । विशेषता styleएक जावास्क्रिप्ट ऑब्जेक्ट को स्वीकार करती है जहां कुंजियाँ CSS properties हैं, और मान संबंधित संपत्ति मान हैं।

Example:

jsx
const MyComponent = () => {
const myStyle = {
    color: 'blue',
    fontSize: '16px',
    fontWeight: 'bold',
  }; 
return (
    <div style={myStyle}>
      This text will be displayed in blue with a bold font.
    </div>
  );
};

CSS Classes:

You can apply CSS styles by defining classes in your CSS and then adding those classes to the JSX elements using the className attribute. Note that in JSX, you use className instead of class to avoid conflicts with the class keyword in JavaScript.

CSS Classes:

आप अपने Css में CSS Style  को परिभाषित करके और फिर className विशेषता का उपयोग करके उन Classes को jsx तत्वों में जोड़कर Css style को लागू कर सकते हैं। ध्यान दें कि JSX में, आप जावास्क्रिप्ट में कीवर्ड के साथ टकराव से बचने के लिए classके बजाय className का उपयोग करते हैं।

Example:

jsx
// styles.css 
.myClass {
  color: red;
  font-size: 14px;
}

// MyComponent.jsx 
const MyComponent = () => {
  return (
    <div className="myClass">
      This text will be displayed in red with a font size of 14 pixels.
    </div>
  );
};

CSS Modules:

CSS Modules is a technique that allows you to import CSS files into your JSX components and use them as JavaScript objects. This way, you can write CSS styles specific to a component and avoid global style clashes.

CSS Modules:

CSS Modules एक ऐसी तकनीक है जो आपको CSS फ़ाइलों को अपने jsx घटकों में आयात करने और उन्हें जावास्क्रिप्ट ऑब्जेक्ट के रूप में उपयोग करने की अनुमति देती है। इस तरह, आप किसी घटक के लिए विशिष्ट CSS styles लिख सकते हैं और global style टकराव से बच सकते हैं।
Example:

jsx
// styles.module.css
.
myModuleClass {
  color: green;
  font-size: 18px;
} 
// MyComponent.jsx 
import styles from './styles.module.css'; 
const MyComponent = () => { 
return (
    <div className={styles.myModuleClass}>
      This text will be displayed in green with a font size of 18 pixels.
    </div>
  );
};

Remember to adjust the paths for importing styles based on your project structure. अपनी परियोजना संरचना के आधार पर शैलियों को आयात करने के लिए पथ समायोजित करना याद रखें। These are some common ways to apply CSS styles to JSX elements in React. Choose the method that best suits your project's needs and maintainability. रिएक्ट में JSX तत्वों पर CSS शैलियों को लागू करने के ये कुछ सामान्य तरीके हैं। वह तरीका चुनें जो आपके प्रोजेक्ट की आवश्यकताओं और रखरखाव के लिए सबसे उपयुक्त हो।