React CSS Modules: Styling React Components with Encapsulated CSS

React CSS Modules - это модульная система для стилей в приложениях React, которая позволяет изолировать стили компонентов, предоставляя уникальные имена классов для каждого компонента. Это позволяет избежать конфликтов и переопределения стилей между компонентами.

Пример использования CSS Modules в React:

1. Установка зависимостей:

shell
   npm install react-css-modules
   

2. Создание компонента:

jsx
   import React from 'react';
   import styles from './Component.module.css';
   const Component = () => {
     return (
       

         
Hello, World!
         Click me
       
     );
   };
   export default Component;
   

В данном примере создается компонент "Component". Модуль стилей импортируется из файла "Component.module.css". Классы из этого модуля доступны через объект "styles".

3. Файл "Component.module.css":

css
   .container {
     background-color: #f2f2f2;
     padding: 20px;
   }
   .title {
     color: red;
     font-size: 24px;
   }
   .button {
     background-color: blue;
     color: white;
     padding: 10px;
   }
   

В данном примере определены классы "container", "title" и "button" с соответствующими стилями.

4. Использование компонента:

jsx
   import React from 'react';
   import Component from './Component';
   const App = () => {
     return ;
   };
   export default App;
   

Пример использования созданного компонента "Component" в основном приложении.

При сборке проекта CSS Modules автоматически генерируют уникальные имена классов для каждого компонента, что позволяет изолировать стили и предотвращать их конфликты. Это особенно полезно при разработке больших и масштабируемых приложений, где есть множество компонентов с собственными стилями.