CSS-модули в React — это способ определения области действия CSS путем автоматического создания уникальных имен классов. Это предотвращает конфликты имен классов в больших приложениях и позволяет использовать модульные стили. Вот как вы можете использовать модули CSS в проекте React:

1. Настройка

По умолчанию React поддерживает модули CSS. Вам просто нужно назвать свой CSS-файл с расширением .module.css.

2. Пример настройки

Структура файла:

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

Кнопка.модуль.css:

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

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

Кнопка.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. Вы ссылаетесь на них, используя Styles.className.

Преимущества:

• Стили области действия: область каждого класса ограничена локально компонентом, что позволяет избежать конфликтов имен.
• Удобство обслуживания: по мере роста вашего приложения CSS остается модульным и простым в управлении.

Дайте мне знать, если вам понадобится помощь в конкретных случаях!