Робота зі стилями в React.

Повне пояснення

Що це і навіщо

• У React існує кілька способів застосовувати стилі: CSS‑модулі, styled-components (CSS‑in‑JS), inline‑стилі та інші бібліотеки.

Ключові принципи/терміни

• CSS‑модулі – локальна іменування класів, що запобігає колізіям.
• styled-components – створюють React‑компоненти з CSS, підтримують теми та пропси.
• inline‑стилі – об’єкт JavaScript, що передається в атрибут style.

Як це працює

• CSS‑модулі компілюються під час збірки, генеруючи унікальні класи.
• styled-components створюють тег <style> в DOM, підключаючи CSS‑правила.
• inline‑стилі застосовуються безпосередньо до елементу, не потребуючи зовнішніх файлів.

Практика і реалізація

// CSS‑модуль
import styles from './Button.module.css';
<button className={styles.primary}>Click</button>

// styled-components
import styled from 'styled-components';
const Button = styled.button<{primary?: boolean}>`
  background: ${props => props.primary ? 'blue' : 'gray'};
`;
<Button primary>Click</Button>

// inline‑стилі
<button style={{background: 'green'}}>Click</button>

Тестування

• Для CSS‑модулів можна перевіряти наявність класу у className.
• Для styled-components використовуйте jest-styled-components або @testing-library/react.

Особливості в контексті React

• CSS‑модулі добре працюють з CRA, Vite, Next.js.
• styled-components інтегруються з ThemeProvider для тем.
• Inline‑стилі підходять для швидких прототипів, але не підтримують псевдокласи.

Оптимізація та типові помилки

• Перевантаження CSS‑модулів через занадто багато файлів.
• Необхідність !important у styled-components – краще використати специфічність.
• Inline‑стилі не підтримують медіа-запити.

Диагностика

• Якщо стиль не застосовується, перевірте правильність імпорту модуля.
• Для styled-components переконайтеся, що ThemeProvider обгортає компонент.
• Для inline‑стилів перевірте синтаксис об’єкта (наприклад, backgroundColor замість background-color).