Библиотеки для стилизации React-компонентов

1. Инлайн-стили через проп style — быстро, но без псевдоклассов и медиа-запросов
2. CSS Modules — изолированные классы, но нет прямого доступа к пропсам компонента
3. CSS-in-JS вроде styled-components и Emotion — стили живут рядом с компонентом
4. Готовые UI-kit библиотеки — набор компонентов и тема «из коробки»

Первые два подхода мы уже частично затрагивали в предыдущих уроках, а с CSS-in-JS подробно познакомимся в уроках 29 и 30. Сегодняшний урок — про четвёртый путь: библиотеки, которые дают не просто набор стилей, а целую систему готовых компонентов вроде Button, Modal или Table, уже адаптированных под тёмную и светлую тему.

Установка и первый компонент

Chakra UI построена поверх Emotion и framer-motion, поэтому при установке нужно поставить сразу несколько пакетов.

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

После установки всё приложение нужно обернуть в компонент ChakraProvider — именно он даёт всем дочерним компонентам доступ к теме и системе стилей.

import { ChakraProvider, Button, Box } from '@chakra-ui/react';
 
function App() {
  return (
    <ChakraProvider>
      <Box p={4}>
        <Button colorScheme="blue">Нажми меня</Button>
      </Box>
    </ChakraProvider>
  );
}
 
export default App;

Особенности Chakra UI

У Chakra UI есть несколько черт, которые выделяют её среди других библиотек.

1. Style-props вместо CSS-классов, например p={4} вместо padding
2. Встроенная поддержка светлой и тёмной темы «из коробки»
3. Доступность (accessibility) заложена в компоненты по умолчанию
4. Единая система токенов темы для отступов, цветов и размеров шрифта

Установка и пример

Как и Chakra UI, Material UI построена на Emotion, поэтому пакеты стилизации ставятся вместе с основной библиотекой.

npm install @mui/material @emotion/react @emotion/styled

Стилизовать конкретный компонент удобно через проп sx — он принимает объект со стилями и понимает токены темы, например отступы в условных единицах.

import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
 
function App() {
  return (
    <Box sx={{ padding: 2 }}>
      <Button variant="contained" color="primary">
        Нажми меня
      </Button>
    </Box>
  );
}
 
export default App;

Особенности Material UI

1. Готовая реализация Material Design с продуманной типографикой
2. Гибкая настройка темы через функцию createTheme
3. Множество сложных готовых компонентов: DataGrid, DatePicker, Autocomplete
4. Большое сообщество, подробная документация и много готовых примеров

Установка и пример

npm install antd

Начиная с пятой версии Ant Design использует CSS-in-JS под капотом, поэтому подключать отдельный файл стилей вручную обычно не требуется.

import { Button } from 'antd';
 
function App() {
  return <Button type="primary">Нажми меня</Button>;
}
 
export default App;

Особенности Ant Design

1. Большой набор готовых enterprise-компонентов: сложные таблицы, формы, графики
2. Строгая дизайн-система с фиксированными отступами и размерами шрифта
3. Гибкая настройка темы через компонент ConfigProvider
4. Активно используется в крупных корпоративных и государственных проектах

Сравнение Chakra UI, Material UI и Ant Design

У всех трёх библиотек одна и та же цель — избавить разработчика от ручной стилизации, но приходят они к ней разными путями. Ниже — краткое сравнение по ключевым критериям.

Если важна скорость старта и минимализм — присмотритесь к Chakra UI. Если нужен готовый и предсказуемый визуальный язык уровня Google — выбирайте Material UI. А для сложных админ-панелей и enterprise-систем с таблицами и формами часто удобнее Ant Design.

Мы разобрали три популярные библиотеки для стилизации React-компонентов — Chakra UI, Material UI и Ant Design. У каждой свой подход: Chakra делает ставку на простоту и style-props, Material UI — на реализацию Google Material Design, а Ant Design — на готовые enterprise-компоненты для сложных интерфейсов. Итоговый выбор зависит от задачи, размера проекта и того, насколько важна гибкая кастомизация внешнего вида.

В следующем уроке разберём Styled Components — подход, при котором стили пишутся прямо в JavaScript-коде рядом с компонентом, а не выносятся в отдельную UI-библиотеку.