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

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

  1. Установить пакет react-css-modules:
npm install react-css-modules --save
  1. Создать файл CSS модуля, например styles.module.css, и определить в нем стили:
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 24px;
  font-weight: bold;
}
  1. Импортировать 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;
  1. Использовать классы стилей из объекта styles вместо обычных строковых имен классов.

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

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

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

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Добавления CSS модулей в React

Наш специалист свяжется с вами в ближайшее время и уточнит детали