وحدات CSS في React هي طريقة لتحديد نطاق CSS عن طريق إنشاء أسماء فئات فريدة تلقائيًا. وهذا يمنع تضارب أسماء الفئات في التطبيقات الكبيرة ويسمح بالأنماط المعيارية. إليك كيفية استخدام وحدات CSS في مشروع React:

1. الإعداد

افتراضيًا، تدعم React وحدات CSS. كل ما عليك فعله هو تسمية ملف CSS الخاص بك بالامتداد .module.css.

2. مثال الإعداد

هيكل الملف:

src/
├── components/
│   ├── Button.js
│   ├── Button.module.css

Button.module.css:

.button {
  background-color: #6200ea;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #3700b3;
}

Button.js:

import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return (
    
      Click Me
    
  );
}

export default Button;

كيف يعمل:

• Button.module.css: يمكنك تحديد قواعد CSS مثل أي ملف CSS عادي.
• styles.button: يتم استيراد أسماء الفئات من وحدة CSS ككائن JavaScript. يمكنك الرجوع إليها باستخدام style.className.

فوائد:

• الأنماط المحددة النطاق: يتم تحديد نطاق كل فئة محليًا للمكون، مع تجنب تضارب الأسماء.
• قابلية الصيانة: مع نمو تطبيقك، يظل CSS الخاص بك معياريًا وأسهل في الإدارة.

أخبرني إذا كنت بحاجة إلى مساعدة في حالات معينة!