Как попадают стили из одного компонента в другой без Scope

В React стили могут "протекать" между компонентами без scoped стилей из-за глобальной природы CSS. Основные причины:

1. Глобальные стили - если стили импортируются в корневом компоненте или через index.html, они применяются ко всем элементам

2. Селекторы по классу - одинаковые имена классов в разных компонентах будут конфликтовать

/* Button.module.css */
.button {
  color: red;
}

/* Header.module.css */
.button {
  color: blue; /* Переопределит стиль кнопки */
}

3. Каскадность CSS - стили наследуются по DOM-дереву

4. CSS-in-JS без генерации уникальных классов - если не использовать styled-components или аналоги с автоматическим хешированием

Решение:

• Использовать CSS Modules (*.module.css)
• Применять CSS-in-JS библиотеки
• Использовать BEM/другие методологии именования
• Добавить scope через атрибуты (data-*)