Стилизация и 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 поможет упростить его.
Встроенные стили — это плохо?¶
CSS-классы, как правило, лучше для производительности, чем встроенные стили.
Что такое CSS-in-JS?¶
«CSS-in-JS» — это паттерн, в котором CSS-код создаётся при помощи JavaScript, вместо того, чтобы писать его во внешних файлах. Ознакомьтесь со сравнением библиотек по работе с «CSS-in-JS» в этом репозитории.
Обратите внимание, что данная функциональность не входит в React из коробки, а предоставляется сторонними библиотеками. React ничего не знает про то, как определяются стили. Если вы сомневаетесь, использовать указанный выше способ, то хорошим началом станет определение стилей в отдельном файле с расширением *.css
, как вы ранее привыкли это делать, а затем указать нужные классы с помощью className
.
Можно создавать анимации в React?¶
React может использоваться для создания крутых анимаций! В качестве примера посмотрите библиотеки React Transition Group и React Motion.