React හි style ගුණාංගයේ CSS විලාසිතා සමඟ වැඩ කිරීම

පෙර පාඩම් වලදී, style ගුණාංගයට අපි CSS විලාසිතා සහිත වස්තුවක් අඩංගු විචල්යයක් සම්ප්‍රේෂණය කළෙමු. අතරමැදි විචල්යයක් භාවිතා නොකර, වස්තුව සෘජුවම ගුණාංගය තුළ ලිවිය හැකිය - මෙම අවස්ථාවේ දී අපට අවශ්‍ය වන්නේ හැඩ වරහන් දෙකක් පෙළගැස්මකි: පළමුවැන්න JSX ඇතුල් කිරීම සඳහා වන අතර, දෙවැන්න වස්තුව සඳහා වේ.

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

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

උදාහරණයක් ලෙස, අපගේ React සංරචකය App හි පළමු ඡේදය සඳහා CSS ගුණාංග සෘජුවම ලියන්න:

App.js<p style = {{
  color: 'orangered',
  fontWeight: 'bold' }}>
  text
</p>

ඒ හා සමානව ඉතිරි ටැග් සඳහා විලාසිතා එකතු කරන්න.

එහි ප්‍රතිඵලයක් ලෙස, සංරචක කේතය පහත පරිදි දිස්වනු ඇත:

App.jsfunction App() {
  return (
    <div style = {{
      width: '200px',
      border: '2px solid brown',
      padding: '10px',
      textAlign: 'center' }}>
      <p style={{
        color: 'orangered',
        fontWeight: 'bold' }}>
        text
      </p>
      <p style = {{
        fontStyle: 'brown',
        color: 'brown' }}>
        text
      </p>
      <p style = {{
        backgroundColor: 'orange',
        fontWeight: 'bold',
        color: 'white' }}>
        text
      </p>
    </div>
  );
}