Estilo y CSS

¿Cómo agrego clases CSS a los componentes?

Pasa una string como la prop className:

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

Es común que las clases CSS dependan de las props o del estado del componente:

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

Tip

Si a menudo escribes código como este, el paquete classnames puede hacerlo más simple.

¿Puedo usar estilos en línea?

Sí, ve la documentación sobre estilo aquí.

¿Los estilos en línea son malos?

Las clases CSS son generalmente mejores para el rendimiento que los estilos en línea.

¿Qué es CSS-in-JS?

“CSS-in-JS” se refiere a un patrón donde el CSS se compone usando JavaScript en lugar de definirlo en archivos externos.

Ten en cuenta que esta funcionalidad no es parte de React, sino que es proporcionada por bibliotecas de terceros. React no tiene una opinión sobre cómo se definen los estilos; en caso de dudas, un buen punto de partida es definir tus estilos en un archivo *.css separado como de costumbre y referirse a ellos usando className.

¿Puedo hacer animaciones en React?

React puede usarse para potenciar animaciones. Revisa React Transition Group, React Motion, React Spring o Framer Motion, por ejemplo.