පාඩම 8: React Components වලට Style එකතු කිරීම 🎨

අපගේ components වලට CSS styles එකතු කරන ආකාරය සහ CSS Modules භාවිතයෙන් styles, අදාළ component එකට පමණක් සීමා කරන ආකාරය ඉගෙන ගනිමු.

---

Styling ක්‍රම

React වලදී styling සඳහා ක්‍රම කිහිපයක් ඇත. අප මීට පෙර Bootstrap CSS ගොනුව `main.jsx` හි `import` කිරීමෙන් global styling භාවිතා කළා. නමුත් එක් එක් component එකට අදාළව styles ලිවීමේදී, එම styles වෙනත් components වලට බලපෑම වැළැක්වීම (scoping) වැදගත් වේ. ඒ සඳහා **CSS Modules** යනු ඉතා ජනප්‍රිය ක්‍රමයකි.

CSS Modules යනු කුමක්ද?

CSS Modules යනු සාමාන්‍ය CSS ගොනුවකි, නමුත් එය `.module.css` ලෙස නම් කර අවසන් වේ (උදා: `Counter.module.css`). මෙසේ නම් කළ විට, React build tool එක (Vite) ස්වයංක්‍රීයව එම ගොනුවේ ඇති CSS class නම්, unique (සුවිශේෂී) නම් බවට පත් කරයි. එම නිසා, එම class නම්, ඔබ import කරන component එකට පමණක් සීමා වේ.

---

නව ෆෝල්ඩර් ව්‍යුහය

අපගේ `CounterDisplay` component එකේ පෙන්වන අංකයට style එකක් එකතු කරමු. ඒ සඳහා, `CounterDisplay.jsx` ගොනුව අසලින්ම, `CounterDisplay.module.css` නමින් අලුත් CSS ගොනුවක් සාදමු.

counter-app/
└── src/
    └── components/
        ├── Counter.jsx
        ├── CounterActions.jsx
        ├── CounterDisplay.jsx
        ├── CounterDisplay.module.css  <-- අලුත් Style ගොනුව
        └── CounterHeader.jsx

1. `CounterDisplay.module.css` ගොනුව නිර්මාණය කිරීම

`src/components/` ෆෝල්ඩරය තුල `CounterDisplay.module.css` නමින් ගොනුවක් සාදා, පහත CSS කේතය එයට ඇතුළත් කරන්න. මෙහිදී අපි counter අගය සඳහා style එකක් නිර්මාණය කරමු.

/* src/components/CounterDisplay.module.css */

.counterValue {
  font-weight: 700;
  color: #212529; /* Default color */
  transition: color 0.3s ease-in-out;
}

.positiveValue {
  color: #198754; /* Green color for positive numbers */
}

.zeroValue {
  color: #6c757d; /* Gray color for zero */
}

2. `CounterDisplay.jsx` Component එක යාවත්කාලීන කිරීම

දැන්, අප සෑදූ CSS module එක `CounterDisplay.jsx` ගොනුවට `import` කර, `count` අගය මත පදනම්ව අදාළ style එක ලබා දෙමු.

// src/components/CounterDisplay.jsx

import styles from './CounterDisplay.module.css'; // 1. CSS Module එක import කරන්න

function CounterDisplay({ count }) {
  // 2. count අගය මත පදනම්ව style class එක තීරණය කරන්න
  let valueStyle;
  if (count > 0) {
    valueStyle = styles.positiveValue;
  } else {
    valueStyle = styles.zeroValue;
  }

  return (
    <div className="card-body">
      {/* 3. CSS module එකෙන් එන class නම් භාවිතා කරන්න */}
      <h1 className={`display-1 ${styles.counterValue} ${valueStyle}`}>
        {count}
      </h1>
    </div>
  );
}

export default CounterDisplay;

සිදුවන්නේ කුමක්ද?

• import styles from './CounterDisplay.module.css';: CSS Module එක import කළ විට, React එය `styles` නම් JavaScript object එකක් බවට පත් කරයි.
• `styles.counterValue` ලෙස ලිවීමෙන්, React මගින් ජනනය කළ unique class නම අපට ලැබේ (උදා: `CounterDisplay_counterValue__AbC12`).
• අපි `count` අගය 0 ට වඩා වැඩි නම් `styles.positiveValue` class එකත්, නැතිනම් `styles.zeroValue` class එකත් `valueStyle` නම් variable එකට ලබා ගනිමු.
• Template literals (backticks ``) භාවිතයෙන්, Bootstrap class එක සමග අපගේ dynamic CSS module class නම් දෙකම `className` එකට ලබා දී ඇත.

ප්‍රතිඵලය (Result)

මෙම වෙනස්කම් save කළ විට, ඔබගේ browser එකේ Counter App එකේ අගය 0 ට වඩා වැඩි වන විට කොළ පැහැයෙන්ද, 0 දී අළු පැහැයෙන්ද දිස්වනු ඇත! වැදගත්ම දේ නම්, `counterValue`, `positiveValue` වැනි class නම් වෙනත් කිසිදු component එකකට බල නොපා, මෙම `CounterDisplay` component එකට පමණක් සීමා වීමයි.

සාරාංශය: CSS Modules භාවිතයෙන්, අපට සාමාන්‍ය CSS ලියන අතරතුරම, React මගින් එම styles ස්වයංක්‍රීයව අදාළ component එකට පමණක් සීමා කරගත (scoped) හැක. මෙය විශාල applications වලදී style ගැටුම් (conflicts) වළක්වා ගැනීමට ඇති හොඳම ක්‍රමයකි.

⬅️ මුල් පිටුවට