Какие есть варианты избавиться от inline-стилей в React-компоненте?

Inline-стили в React — это когда стили передаются прямо в JSX через атрибут style={{ color: 'red' }}. Они удобны для динамических значений, но плохо масштабируются: нет псевдоклассов, медиазапросов, переиспользования и кэширования. Поэтому в реальных проектах их стараются выносить.

Основные подходы

• Обычный CSS + className — самый простой вариант: стили в отдельном файле, в JSX только класс.
• CSS Modules — те же CSS-файлы, но классы автоматически хешируются, что даёт локальную область видимости.
• Препроцессоры (SCSS, Less) — добавляют переменные, вложенность, миксины поверх обычного CSS.
• CSS-in-JS (styled-components, emotion) — стили пишутся в JS, поддерживают пропсы и темизацию.
• Utility-классы (Tailwind, Bootstrap) — стилизация через готовые классы прямо в JSX.

Пример: было и стало

// Было: inline
<button style={{ background: 'blue', color: 'white' }}>OK</button>

// Стало: CSS Module
import styles from './Button.module.css';
<button className={styles.primary}>OK</button>

/* Button.module.css */
.primary { background: blue; color: white; }
.primary:hover { background: darkblue; }

Когда что выбирать

1. Небольшой проект — обычный CSS или CSS Modules.
2. Крупное приложение с темизацией — CSS-in-JS.
3. Быстрая разработка UI — utility-классы.
4. Динамические значения (например, ширина из пропса) — допустимо оставить inline или использовать CSS-переменные.

Итог: избавляться от inline-стилей стоит ради переиспользования, поддержки псевдоклассов и медиазапросов; выбирайте подход по масштабу проекта и требованиям к изоляции.