Styles et CSS

Comment ajouter des classes CSS aux composants ?

En passant une chaîne à la prop className :

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

Les classes CSS dépendent fréquemment des props ou de l’état local du composant :

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

Astuce

S’il vous arrive régulièrement d’écrire du code comme celui-ci, le module classnames peut vous aider à simplifier votre code.

Puis-je utiliser des styles en ligne ?

Oui, consultez la documentation sur le style ici.

Est-ce que les styles en ligne sont une mauvaise pratique ?

Les classes CSS sont généralement plus performantes que les styles en ligne.

Qu’est-ce que CSS-in-JS ?

“CSS-in-JS” fait référence à un modèle où les styles CSS sont créés en utilisant du JavaScript au lieu d’être définis dans des fichiers externes.

Remarquez bien que cette fonctionnalité ne fait pas partie de React : elle est fournie par des bibliothèques tierces. React n’a pas d’opinion sur la manière dont les styles doivent être définis ; si vous avez un doute, une bonne manière de commencer consiste à définir vos styles dans des fichiers *.css séparés comme d’habitude et à y faire référence en utilisant className.

Puis-je faire des animations avec React ?

React peut être utilisé pour générer des animations. Voyez par exemple React Transition Group et React Spring.