Стилизация и CSS

Как добавить CSS-классы в компоненты?

Передайте в проп className строку:

render() {
  return <span className="menu navigation-menu">Меню</span>
}

Обычно CSS-классы зависят от пропсов или состояния:

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Меню</span>
}

Совет

Если вы часто пишете похожий код, то пакет classnames поможет упростить его.

Можно ли использовать встроенные стили?

Конечно, прочитайте документацию об элементах DOM.

Встроенные стили — это плохо?

CSS-классы, как правило, лучше для производительности, чем встроенные стили.

Что такое CSS-in-JS?

«CSS-in-JS» — это паттерн, в котором CSS-код создаётся при помощи JavaScript, вместо того, чтобы писать его во внешних файлах.

Обратите внимание, что данная функциональность не входит в React из коробки, а предоставляется сторонними библиотеками. React ничего не знает про то, как определяются стили. Если вы сомневаетесь, использовать указанный выше способ, то хорошим началом станет определение стилей в отдельном файле с расширением *.css, как вы ранее привыкли это делать, а затем указать нужные классы с помощью className.

Можно создавать анимации в React?

React может использоваться для создания крутых анимаций! В качестве примера посмотрите библиотеки React Transition Group, React Motion, React Spring или Framer Motion.