रिएक्ट में अलग फाइल से डेटा को स्टाइल एट्रिब्यूट में इन्सर्ट करना

हमें स्टाइल ऑब्जेक्ट्स को कंपोनेंट फाइल में नहीं लिखना होगा जैसा कि पिछले पाठ में किया था, बल्कि हम अपने स्टाइल ऑब्जेक्ट्स के साथ एक अलग फाइल बना सकते हैं और उन्हें आवश्यक कंपोनेंट में इम्पोर्ट कर सकते हैं।

तो, आइए हमारे कंपोनेंट को लेते हैं बिना CSS स्टाइल्स के:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

आइए src फोल्डर में एक अलग फाइल styles.js बनाएं, जिसमें हम अपने स्टाइल ऑब्जेक्ट्स को लिखेंगे:

styles.jsconst class1 = {
  width: '200px',
  border: '2px solid brown',
  padding: '10px',
  textAlign: 'center',
};

const class2 = {
  color: 'orangered',
  fontWeight: 'bold',
};

const class3 = {
  fontStyle: 'italic',
  color: 'brown',
};

const class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
};

फाइल styles.js के नीचे हमारे ऑब्जेक्ट्स को एक ऑब्जेक्ट styles के रूप में एक्सपोर्ट करना न भूलें:

styles.jsexport const styles = {
  class1: class1,
  class2: class2,
  class3: class3,
  class4: class4
};

अब ऑब्जेक्ट styles को हमारे कंपोनेंट में इम्पोर्ट करते हैं:

App.jsimport { styles } from "./styles";       

अब हम सामान्य ऑब्जेक्ट styles से आवश्यक CSS स्टाइल ऑब्जेक्ट को हमारे टैग्स पर लागू कर सकते हैं। आइए पहले पैराग्राफ पर ऑब्जेक्ट class2 से स्टाइल्स लागू करें:

App.js<p style={styles.class2}>text</p>

इसी तरह से बाकी टैग्स पर ऑब्जेक्ट्स से स्टाइल्स जोड़ें।

परिणामस्वरूप, कंपोनेंट का कोड निम्नलिखित तरह से दिखेगा:

App.jsfunction App() {
  return (
    <div style={styles.class1}>
      <p style={styles.class2}>text</p>
      <p style={styles.class3}>text</p>
      <p style={styles.class4}>text</p>
    </div>
  );
}