Styling and CSS

Як додавати CSS класи до компонентів?

Передайте рядок як проп className:

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

Класи зазвичай залежать від пропсів та стану компоненту:

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

Порада

Якщо ви часто пишете такий код, пакунок classnames може спростити його.

Чи можу я використовувати inline стилі?

Так, дивіться документ щодо стилізування .

Чи є inline стилі поганою практикою?

Зазвичай CSS класи кращі за продуктивністю ніж inline стилі.

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

“CSS-in-JS” відносяться до патерну, де CSS описується з використанням JavaScript замість описування у зовнішніх файлах.

Зауважте, що цей функціонал не є частиною React, але надається сторонніми бібліотеками. React не має чіткої точки зору стосовно визначення стилів; якщо ви маєте сумнів, гарним початком може бути визначення ваших стилів в окремому *.css файлі з посиланням на них використовуючи className.

Чи можу я робити анімації в React?

React може використовуватися для роботи з анімаціями. Для прикладів, дивіться React Transition Group та React Spring.