CSS-модули в React

Вот как установить и использовать CSS-модули:

Установка CSS-модулей:

Для начала, установите css-loader и style-loader, а также webpack или webpack-dev-server, если они еще не установлены.

npm install --save-dev css-loader style-loader

Создание локальных стилей для компонентов:

Создайте файл стилей для вашего компонента, именованный, например, styles.module.css. Помните, что ключевое слово module в имени файла указывает на то, что это файл CSS-модуля.

/* styles.module.css */
.myComponent {
  color: blue;
  font-size: 18px;
}

Использование локальных стилей в компоненте:

В вашем React компоненте вы можете импортировать и использовать стили, как показано ниже:

// MyComponent.js
import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
  return <div className={styles.myComponent}>This is a styled div using CSS Modules.</div>;
};

export default MyComponent;

В этом примере, styles.myComponent — это уникальное имя класса, сгенерированное CSS-модулем для вашего компонента.

Запуск с webpack:

Убедитесь, что ваш webpack (или webpack-dev-server) настроен для обработки файлов CSS и использования css-loader и style-loader.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

Теперь ваши стили будут применяться локально только к компоненту, для которого они определены, что упрощает управление стилями в больших проектах и избегает конфликтов имен классов.