React හි වස්තුවකින් style ගුණාංගයට දත්ත ඇතුළත් කිරීම

CSS මෝස්තර අංගවලට style ගුණාංගය භාවිතයෙන්ද එක් කළ හැක. මෙම සහ ඊළඟ පාඩම් කිහිපයෙන්, අපි inline styling ක්‍රම සලකා බලමු.

දැන් අපි styles.css ගොනුව සම්බන්ධ නොකර, අදාළ අගයන් style ගුණාංගයට එක් එක් ටැග් සඳහා මෝස්තර සහිත වස්තුවක් ලෙස යොමු කරමු, අපි ඒවා සංරචක ගොනුවේම සෘජුව ලියනු ඇත.

ඉතින්, අපි පෙර පාඩමේදී සාදන ලද, CSS මෝස්තර නොමැති අපේ සංරචකය ගනිමු:

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

දැන් අපි App.js ගොනුවේ return විධානයට පෙර div එක සඳහා CSS මෝස්තර සහිත වස්තුවක් class1 යන විචල්‍යයේ සාදමු. මතක තබා ගන්න, මෙහි ගුණාංගවල නම් 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>
  );
}