ملفات التنسيق وخاصية className | تنسيق المكونات في React

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لا تفرض React لغة تنسيق مغلقة خاصة بها، بل تستثمر خبرتك الأصيلة في CSS بالكامل! الأسلوب الأساسي الأوسع انتشاراً هو كتابة ملف تنسيق خارجي يُستورد في مشاريع Vite عبر import './TrackCard.css' وربطه بالعناصر باستخدام خاصية className.

تمنحك ملفات التنسيق الخارجية كافة قدرات CSS الأصيلة: التخزين المؤقت في المتصفح، وحالات التفاعل مثل :hover و:focus-visible، واستعلامات الشاشات المتجاوبة @media، ومتغيرات الألوان للوضعين الفاتح والداكن.

الصف 2 كود برمجي

HTML

// TrackCard.jsx (uses classes from TrackCard.css)
function TrackCard() {
  return (
    <article className="studio-feature-card">
      <span className="rx-badge">Stylesheet CSS</span>
      <h3 className="feature-title">Responsive UI</h3>
      <p>Supports :hover, :focus, and @media.</p>
    </article>
  );
}

جرّب بنفسك

الصف 3 ملاحظة هامة

External CSS with className ملفات التنسيق وخاصية className

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (تنسيق المكونات في React)