Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
52 lines (36 sloc) 1.82 KB
id title permalink layout category
faq-styling
Styling and CSS
docs/faq-styling.html
docs
FAQ

How do I add CSS classes to components? {#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>
}

Tip

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

Can I use inline styles? {#can-i-use-inline-styles}

Yes, see the docs on styling here.

Are inline styles bad? {#are-inline-styles-bad}

CSS classes are generally better for performance than inline styles.

What is CSS-in-JS? {#what-is-css-in-js}

"CSS-in-JS" refers to a pattern where CSS is composed using JavaScript instead of defined in external files. Read a comparison of CSS-in-JS libraries here.

Note that this functionality is not a part of React, but provided by third-party libraries. React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate *.css file as usual and refer to them using className.

Can I do animations in React? {#can-i-do-animations-in-react}

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

You can’t perform that action at this time.