{"componentChunkName":"component---src-templates-docs-js","path":"/docs/faq-styling.html","result":{"data":{"markdownRemark":{"html":"

How do I add CSS classes to components?

\n

Pass a string as the className prop:

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

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

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

Tip

\n

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

\n
\n

Can I use inline styles?

\n

Yes, see the docs on styling here.

\n

Are inline styles bad?

\n

CSS classes are generally better for performance than inline styles.

\n

What is CSS-in-JS?

\n

“CSS-in-JS” refers to a pattern where CSS is composed using JavaScript instead of defined in external files.

\n

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.

\n

Can I do animations in React?

\n

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

","frontmatter":{"title":"Styling and CSS","next":null,"prev":null},"fields":{"path":"content/docs/faq-styling.md","slug":"docs/faq-styling.html"}}},"pageContext":{"slug":"docs/faq-styling.html"}},"staticQueryHashes":[]}