We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

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.