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

Como eu adiciono classes de CSS nos componentes?

\n

Passe a string para a prop className:

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

É comum para classes do CSS dependerem de props ou o state do componente.

\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

Dica

\n

Se você frequentemente se vê escrevendo código assim, o pacote classnames pode simplicar isso.

\n
\n

Posso utilizar estilo inline?

\n

Sim, veja os docs sobre estilização aqui.

\n

É ruim utilizar estilos inline?

\n

Classes CSS geralmente possuem melhor performance que estilos inline.

\n

O que é CSS-in-JS?

\n

“CSS-in-JS” se refere a um padrão onde o CSS é definido utilizando JavaScript no lugar de arquivos externos.

\n

Note que esta funcionalidade não faz parte do React, mas é fornecida por bibliotecas de terceiros. React não possui uma opinião sobre como os estilos são definidos; se estiver em dúvida, um bom ponto de partida é definir seus estilos em um arquivo .css separado e referenciá-los usando className.

\n

Posso fazer animações em React?

\n

O React pode ser usado para animações. Veja React Transition Group e React Motion ou React Spring, por exemplo.

","frontmatter":{"title":"Estilização e CSS","next":null,"prev":null},"fields":{"path":"content/docs/faq-styling.md","slug":"docs/faq-styling.html"}}},"pageContext":{"slug":"docs/faq-styling.html"}},"staticQueryHashes":[]}