Добавления CSS модулей в React

Для добавления CSS модулей в React необходимо выполнить следующие шаги:

1. Установить пакет react-css-modules:

npm install react-css-modules --save

2. Создать файл CSS модуля, например styles.module.css, и определить в нем стили:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

3. Импортировать CSS модуль в компонент:

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

const MyComponent = () => {
  return (
   div className={styles.container}>
      <h1 className={styles.title}>Hello, world!</h1>
    </div>
  );
};

export default MyComponent;

4. Использовать классы стилей из объекта styles вместо обычных строковых имен классов.

Теперь стили будут применяться только к элементам внутри компонента, а не глобально. Кроме того, имена классов будут автоматически генерироваться, чтобы избежать конфликтов с другими модулями стилей.