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

පෙර පාඩමේ මෙන් සංරචක ගොනුවේ විලාස වස්තූන් ලිවීම වෙනුවට, අපට අපගේ විලාස වස්තූන් සමඟ වෙනම ගොනුවක් සෑදිය හැකි අතර ඒවා අවශ්‍ය සංරචකයට ආයාත කර ගත හැකිය.

ඉතින්, අපගේ 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";       

දැන් අපට පොදු වස්තුවෙන් අවශ්‍ය CSS විලාස වස්තුව styles අපගේ ටැගවලට යොදා ගත හැකිය. පළමු ඡේදයට 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>
  );
}