Стили

React не диктует, как писать стили. В проекте на Vite есть несколько готовых способов: подключить обычный CSS-файл, использовать CSS-модули, задать стиль атрибутом style или подключить библиотеку вроде Tailwind. Все они работают через атрибут className — так в JSX называется HTML-атрибут class.

Обычный CSS-файл

CSS-файл импортируют прямо в компонент — Vite сам добавит его на страницу. Создайте src/components/PostCard.css:

/* src/components/PostCard.css */
.post-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

// src/components/PostCard.jsx
import './PostCard.css';
 
export default function PostCard({ post }) {
  return (
    <article className="post-card">
      <h2>{post.title}</h2>
      <p>{post.body}</p>
    </article>
  );
}

Карточки статей получат рамку и отступы. Имейте в виду: такие стили глобальные — класс .post-card подействует на любой элемент приложения с этим классом.

Класс по условию

Класс собирают обычной строкой JavaScript:

// src/components/PostCard.jsx
<article className={isFeatured ? 'post-card featured' : 'post-card'}>

Для сложных случаев есть небольшая библиотека clsx, но для начала хватит шаблонных строк.

CSS-модули

Чтобы имена классов не пересекались между компонентами, используют CSS-модули. Достаточно назвать файл с окончанием .module.css — src/components/PostCard.module.css:

/* src/components/PostCard.module.css */
.card {
  border: 1px solid #ddd;
  padding: 16px;
}
 
.title {
  font-size: 20px;
}

// src/components/PostCard.jsx
import styles from './PostCard.module.css';
 
export default function PostCard({ post }) {
  return (
    <article className={styles.card}>
      <h2 className={styles.title}>{post.title}</h2>
    </article>
  );
}

Vite превратит card в уникальное имя вроде _card_1x2y3, поэтому в другом модуле можно спокойно завести свой класс card. Настройка не нужна — это работает в шаблоне Vite сразу.

Атрибут style

Атрибут style принимает объект и подходит для значений, которые вычисляются на лету:

// src/components/ProgressBar.jsx
export default function ProgressBar({ percent }) {
  return <div style={{ width: `${percent}%`, height: 8, background: 'green' }} />;
}

Число без единиц React понимает как пиксели: height: 8 — это 8px.

Tailwind CSS

Tailwind — популярная библиотека готовых классов: вместо своего CSS в разметке пишут className="p-4 border rounded". Для Vite её ставят командой npm install tailwindcss @tailwindcss/vite, добавляют плагин в vite.config.js и строку @import "tailwindcss"; в src/index.css. Подробности — в документации Tailwind.

Что выбрать

Частая ошибка

В JSX атрибут называется className, а не class:

// Неправильно: React выведет предупреждение в консоль.
<article class="post-card">
 
// Правильно:
<article className="post-card">

Обратите внимание и на htmlFor вместо for у тега label.