المكونات في react والستايل الخاص بها

Rayden Storm · 6 مارس 2021

لدي ملف يحتوي على كود css خاص بمكون ال navbar ويمكنني استيراده بسهولة و يعمل عادي

import React from 'react';

import '../styles/navbar.css';

export default function Navbar() {
  return (
    <div>
      <h1 className="brand">Logo</h1>
      <ul className="navlist">
        <li className="navitem">link1</li>
        <li className="navitem">link2</li>
        <li className="navitem">link3</li>
        <li className="navitem">link4</li>
      </ul>
    </div>
  );
}

لكن أظن هذه الطريقة لا تجلب الأصناف المتوفرة في navbar.css الى مكون ال navbar فقط وأنا ابحث عن طريقة لجعل كل مكون يحتوي فقط على ال css الخاص به

Salah Eddin Beriani2 · 6 مارس 2021

يمكنك استيراد ملف ال css بهذه الطريقة وهكذا أنت استخدمت css module وهذا سيضمن لك تصنيفات خاصة فقط بالمكون الذي قمت باستيراد ملف ال css له

import React from 'react';

import styles from '../styles/navbar.css';

export default function Navbar() {
  return (
    <div>
      <h1 className={styles.brand}>Logo</h1>
      <ul className={styles.navlist}>
        <li className={styles.navitem}>link1</li>
        <li className={styles.navitem}>link2</li>
        <li className={styles.navitem}>link3</li>
        <li className={styles.navitem}>link4</li>
      </ul>
    </div>
  );
}