Styling विकल्प: CSS Modules, Inline Styles, Class Helpers
inline styles, CSS के साथ className (CSS Modules की अवधारणा सहित) और conditional styling के लिए class helper utilities की तुलना करें।
Styling विकल्प: CSS Modules, Inline Styles, Class Helpers, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 3 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
शैली का अवलोकन
लक्ष्य: React घटकों को इनलाइन शैलियों, className के माध्यम से CSS और क्लास सहायकों से शैली दें; समझें कि CSS Modules कहाँ उपयोगी होते हैं।
इनलाइन शैलियों की मूल बातें
इनलाइन शैलियाँ ऑब्जेक्ट का उपयोग करती हैं: style={{ color: "red" }}। छोटी, गतिशील मानों के लिए यह अच्छा तरीका है, लेकिन :hover या मीडिया क्वेरी के लिए सीमित है।
क्लास, इनलाइन शैली और सहायक का उदाहरण
पुन: उपयोग योग्य शैलियों के लिए className का उपयोग करें और छोटे गतिशील बदलावों के लिए इनलाइन शैली का; एक सहायक सशर्त रूप से क्लासों को जोड़ता है।
<div id="root"></div>
CSS Modules की अवधारणा
CSS Modules क्लास नामों का दायरा एक फ़ाइल तक सीमित करते हैं (उदाहरण के लिए, Button.module.css), इसलिए एक मॉड्यूल का .btn दूसरे मॉड्यूल की क्लासों से नहीं टकराता।
- ऑब्जेक्ट के रूप में इम्पोर्ट करें (उदाहरण के लिए, styles.btn)।
- मध्यम आकार के ऐप्स के लिए उपयोगी।
क्लास सहायक प्रतिरूप
क्लास सहायक प्रॉप्स या स्थिति के आधार पर क्लास स्ट्रिंग बनाते हैं (उदाहरण के लिए, cx("btn", primary && "primary"))।
- अभिव्यक्तिपूर्ण रूप
- छोटे सशर्त नियम
शैली के सुझाव
सुझाव:
- पुन: उपयोग, :hover और अनुक्रियाशील डिज़ाइन के लिए क्लासों या मॉड्यूल का उपयोग करें।
- छोटे गतिशील मानों के लिए इनलाइन शैलियों का उपयोग करें।
- सहायक के तर्क को सरल और पढ़ने योग्य रखें।
क्लास बनाम इनलाइन शैली का चयन
पुनरावलोकन
पुनरावलोकन: पुन: उपयोग और अनुक्रियाशील नियमों के लिए className/CSS या CSS Modules का उपयोग करें; छोटे गतिशील बदलावों के लिए इनलाइन शैलियाँ जोड़ें; सशर्त रूपों के लिए क्लास सहायक का उपयोग करें।
एआई शिक्षक के साथ React सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 88
- पाठ
- 324
अक्सर पूछे जाने वाले प्रश्न
क्या “Styling विकल्प: CSS Modules, Inline Styles, Class Helpers” पाठ निःशुल्क है?
हाँ—“Styling विकल्प: CSS Modules, Inline Styles, Class Helpers” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
“Styling विकल्प: CSS Modules, Inline Styles, Class Helpers” में मैं क्या सीखूँगा?
inline styles, CSS के साथ className (CSS Modules की अवधारणा सहित) और conditional styling के लिए class helper utilities की तुलना करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 3वाँ पाठ है।
“Styling विकल्प: CSS Modules, Inline Styles, Class Helpers” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- JSX Rules: Expressions, Attributes, Fragments
- Lists और Keys; Conditional Rendering
- Styling विकल्प: CSS Modules, Inline Styles, Class Helpers