React में ऑब्जेक्ट से style एट्रिब्यूट में डेटा इन्सर्ट करना

CSS स्टाइल्स एलिमेंट्स में style एट्रिब्यूट का उपयोग करके भी जोड़ी जा सकती हैं। इस और अगले कुछ पाठों में हम इनलाइन स्टाइलिंग के तरीकों पर विचार करेंगे।

अब हम styles.css फ़ाइल को कनेक्ट नहीं करेंगे, बल्कि संबंधित मानों को style एट्रिब्यूट में स्टाइल्स वाले ऑब्जेक्ट के रूप में पास करेंगे जिन्हें हम प्रत्येक टैग के लिए सीधे कम्पोनेंट फ़ाइल में लिखेंगे।

तो, हमारे बिना CSS स्टाइल्स वाले कम्पोनेंट को लेते हैं, जो हमने पिछले पाठ में बनाया था:

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

चलिए App.js फ़ाइल में return कमांड से पहले class1 वेरिएबल में डिव के लिए CSS स्टाइल्स वाला एक ऑब्जेक्ट बनाते हैं। याद रखें कि गुणों के नाम यहाँ camelCase नोटेशन में लिखे जाते हैं, और गुणों के मानों को कोट्स में रखना होगा:

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

अब पहले पैराग्राफ के लिए स्टाइल्स वाला ऑब्जेक्ट class2 जोड़ते हैं:

App.jsconst class2 = {
  color: 'orangered',
  fontWeight: 'bold'
}

दूसरे पैराग्राफ के लिए स्टाइल्स वाला ऑब्जेक्ट class3:

App.jsconst class3 = {
  fontStyle: 'italic',
  color: 'brown',
}

और, अंत में class4 आखिरी के लिए:

App.jsconst class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
}     

अब, कम्पोनेंट में CSS क्लासेस लागू करने के लिए, हम style एट्रिब्यूट का उपयोग करेंगे। पहले पैराग्राफ के लिए हमारे पास class2 वेरिएबल थी, इसे मान के रूप में पास करते हैं:

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

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

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

App.jsfunction App() {
  const 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',
  };

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