Как применять стили в React?

Контекст

В React стили задают несколькими способами; выбор зависит от масштаба проекта и требований к DX.

1. CSS-классы / CSS Modules

import styles from './Button.module.css';
<button className={styles.primary}>OK</button>

Модули изолируют имена классов.

2. Inline styles

<div style={{ display: 'flex', marginTop: 8 }}>...</div>

Значения — объект, camelCase (backgroundColor). Нет псевдоклассов/@media напрямую.

3. CSS-in-JS

styled-components, Emotion — стили рядом с компонентом; runtime или zero-runtime варианты.

4. Utility / Atomic

Tailwind и подобные — быстрая вёрстка через className.

5. Препроцессоры

Sass/Less по-прежнему в связке с модулями или глобальными файлами.

Практические советы

• Для темы и динамики — CSS variables + классы часто проще тяжёлого CSS-in-JS.
• Не злоупотребляйте inline для всего layout.
• Следите за критическим CSS и размером бандла.

На интервью перечислите 3–4 подхода, плюсы/минусы и что используете в проде. Универсального «единственно верного» нет. Важно обосновать выбор под команду и продукт.

Дополнительно

Стоит уметь объяснить тему на примере из проекта: какой API выберете, какие риски и как отладите. На собеседовании ценят структуру ответа и связи с соседними темами React (рендер, props, состояние, эффекты).