В React существует множество способов стилизации компонентов, каждый из которых имеет свои особенности, преимущества и ограничения. Выбор метода зависит от задач проекта, требуемой гибкости, удобства поддержки и личных предпочтений команды. Ниже перечислены основные подходы к стилизации в React с примерами.

1. Inline-стили (встроенные стили через объект)

Стили задаются прямо в компоненте как объект JavaScript. Применяются к элементу через атрибут style.

const style = {
backgroundColor: 'blue',
padding: '10px',
borderRadius: '5px',
};
function Button() {
return <button style={style}>Нажми</button>;
}

Особенности:

• Поддерживается только camelCase-переменные (backgroundColor, fontSize).

• Не поддерживаются псевдоклассы (:hover, :focus) и медиазапросы.

• Удобно для динамического стилизования:

<button style={{ color: isActive ? 'green' : 'gray' }}>Статус</button>

2. CSS-файлы (глобальные стили)

Используются обычные .css-файлы, подключаемые через import.

/\* styles.css \*/
.button {
background-color: tomato;
color: white;
border: none;
padding: 10px;
}
import './styles.css';
function Button() {
return <button className="button">Кнопка</button>;
}

Особенности:

• Простота.

• Глобальный скоуп: названия классов могут конфликтовать.

• Хорошо подходит для небольших или старых проектов.

3. CSS-модули (CSS Modules)

Локализует стили для каждого компонента. Названия классов автоматически уникализируются.

/\* Button.module.css \*/
.button {
background-color: green;
color: white;
}
import styles from './Button.module.css';
function Button() {
return <button className={styles.button}>Click</button>;
}

Особенности:

• Отсутствие конфликтов имён.

• Отличная поддержка в Create React App, Vite и других сборщиках.

• Можно комбинировать с обычным CSS.

4. Styled-components (CSS-in-JS)

Популярная библиотека для написания CSS прямо в JavaScript. Использует шаблонные строки и поддержку тем.

npm install styled-components
import styled from 'styled-components';
const Button = styled.button\`
background: purple;
color: white;
padding: 10px;
border-radius: 4px;
&:hover {
background: darkmagenta;
}
\`;
function App() {
return <Button>Кнопка</Button>;
}

Особенности:

• Полная поддержка CSS (включая :hover, @media, анимации).

• Поддержка темизации через ThemeProvider.

• Удобна при компонентно-ориентированном подходе.

• Стиль связан с компонентом, легко переиспользовать.

5. Emotion (ещё один вариант CSS-in-JS)

Аналог styled-components, но с большей гибкостью и производительностью.

npm install @emotion/react @emotion/styled
/\*\* @jsxImportSource @emotion/react \*/
import styled from '@emotion/styled';
const Button = styled.button\`
background-color: #ff5a5f;
color: white;
\`;
function App() {
return <Button>Нажми</Button>;
}

Также можно использовать css-функцию:

import { css } from '@emotion/react';
const style = css\`
background: yellow;
padding: 8px;
\`;
<button css={style}>Кнопка</button>

6. Tailwind CSS (утилитарный CSS-фреймворк)

Библиотека классов, применяемых прямо в JSX без написания своих CSS-файлов.

npm install -D tailwindcss
npx tailwindcss init
function Button() {
return (
<button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
Отправить
</button>
);
}

Особенности:

• Высокая скорость разработки.

• Не нужно писать CSS.

• Отлично сочетается с компонентным подходом.

• Лёгкое переключение между состояниями и адаптация под устройства (md:, lg: и т.д.).

7. Стилизация через библиотеку компонентов (например, MUI, Ant Design, Chakra UI)

Фреймворки предлагают готовые компоненты и темы. Например, в MUI можно кастомизировать стили через пропсы, sx или styled().

npm install @mui/material @emotion/react @emotion/styled
import Button from '@mui/material/Button';
function App() {
return (
<Button variant="contained" sx={{ backgroundColor: 'red' }}>
Отправить
</Button>
);
}

Особенности:

• Быстрый прототипинг.

• Стандартизированный дизайн.

• Гибкая темизация.

• Можно писать собственные компоненты с их системой тем.

8. Библиотеки classnames и clsx

Позволяют динамически комбинировать классы в зависимости от условий.

npm install classnames
import classNames from 'classnames';
function Button({ isActive }) {
const buttonClass = classNames('btn', {
'btn-active': isActive,
'btn-inactive': !isActive,
});
return <button className={buttonClass}>Click</button>;
}

Особенности:

• Удобна при условной отрисовке классов.

• Часто используется с Tailwind и CSS-модулями.

9. SCSS/SASS

Если в проекте используется SCSS, можно писать вложенные стили, переменные и миксины.

// Button.module.scss
.button {
background: orange;
color: white;
&:hover {
background: darkorange;
}
}
import styles from './Button.module.scss';
function Button() {
return <button className={styles.button}>SCSS</button>;
}

10. Анимации и переходы

Можно использовать:

• CSS-анимации.

• framer-motion — библиотека анимаций для React.

• Анимации внутри styled-components или Emotion.

Пример с CSS:

@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.button {
animation: fade 1s ease-in-out;
}

11. Динамическая генерация стилей (через JavaScript)

Можно вычислять стили прямо в компоненте:

const buttonStyle = {
backgroundColor: isError ? 'red' : 'green',
};
return <button style={buttonStyle}>Click</button>;

12. Темизация (в зависимости от темы: светлая/тёмная)

Реализуется через:

• CSS-переменные (var(--primary-color)).

• Контекст (ThemeContext).

• Библиотеки (styled-components с ThemeProvider).

Пример с контекстом:

const ThemeContext = React.createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext);
const style = {
backgroundColor: theme === 'dark' ? '#333' : '#eee',
color: theme === 'dark' ? '#eee' : '#333',
};
return <button style={style}>Theme button</button>;
}

13. БЭМ-методология (в сочетании с обычным CSS)

Пример:

.button {}
.button--active {}
.button_\_icon {}
function Button({ active }) {
return (
<button className={\`button ${active ? 'button--active' : ''}\`}>
<span className="button_\_icon">🔥</span>
Кнопка
</button>
);
}

Удобна для структурирования классов без CSS-in-JS.