Styling and CSS

How do I add CSS classes to components?

Pass a string as the className prop:

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

It is common for CSS classes to depend on the component props or state:

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

If you often find yourself writing code like this, classnames package can simplify it.

Can I use inline styles?

Yes, see the docs on styling here.

Are inline styles bad?

CSS classes are generally more efficient than inline styles.

What is CSS-in-JS?

CSS-in-JS refers to a pattern where CSS is written with Javascript, then extracted into a stylesheet.

Comparison of CSS-in-JS Libraries

Can I do animations in React?

React can be used to power animations. See React Transition Group and React Motion, for example.