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

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

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

1
2
3

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

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

1
2
3
4
5
6
7

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

Совет

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

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

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

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

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

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

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

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

Комментарии