Стили и CSS


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

Передайте название CSS класса в свойство className:


Код
    
    render() {
      return <span className="menu navigation-menu">Menu</span>
    }
    

Часто CSS классы могут зависеть от props или state компонента:


Код
    
    render() {
      let className = 'menu';
      if (this.props.isActive) {
        className += ' menu-active';
      }
      return <span className={className}>Menu</span>
    }
    

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


Могу ли я использовать инлайн стили?

Конечно! Смотрите данную документацию по стилям.


Инлайн стили это плохо?

Обычно CSS классы более эффективны, чем инлайн стили.


Что такое CSS в JS?

«CSS-в-JS» относится к паттерну, в котором CSS создается с использованием JavaScript, а не во внешних файлах. Изучите сравнение CSS-в-JS-библиотек здесь.

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


Могу ли я создавать анимацию в React?

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