CSS dans React

Comment utiliser CSS pour styliser une application React

En utilisant React, vous pouvez ajouter du style à vos composants de différentes manières.

Utilisation de classes et CSS

Le premier et le plus simple consiste à utiliser des classes et à utiliser un fichier CSS normal pour cibler ces classes:

const Button = () => {
  return <button className="button">A button</button>
}

.button {
  background-color: yellow;
}

Vous pouvez importer la feuille de style à l'aide d'une instruction d'importation, comme ceci:

import './style.css'

etWebpackse chargera d'ajouter la propriété CSS au bundle.

Utilisation de l'attribut style

Une deuxième méthode consiste à utiliser lestyleattribut attaché à un élément JSX. En utilisant cette approche, vous n'avez pas besoin d'un fichier CSS séparé.

const Button = () => {
  return <button style={{ backgroundColor: 'yellow' }}>A button</button>
}

Le CSS est maintenant défini d'une manière légèrement différente. Tout d'abord, remarquez les doubles accolades: c'est parce questyleaccepte un objet. Nous passons dans un objet JavaScript, qui est défini entre accolades. Nous pourrions également faire ceci:

const buttonStyle = { backgroundColor: 'yellow' }
const Button = () => {
  return <button style={buttonStyle}>A button</button>
}

Lors de l'utilisationcreate-react-app, ces styles sont automatiquement préfixés par défaut grâce à son utilisation deAutoprefixer.

De plus, le style est désormais camelCased au lieu d'utiliser des tirets. Chaque fois qu'une propriété CSS a un tiret, supprimez-le et commencez le mot suivant en majuscule.

Les styles ont l'avantage d'être locaux au composant et ils ne peuvent pas s'infiltrer dans d'autres composants dans d'autres parties de l'application, ce que l'utilisation de classes et d'un fichier CSS externe ne peut pas fournir.

Utilisation des modules CSS

Modules CSSsemble être un endroit parfait au milieu: vous utilisez des classes, mais CSS est limité au composant, ce qui signifie que tout style que vous ajoutez ne peut pas être appliqué à d'autres composants sans votre permission. Et pourtant vos styles sont définis dans un fichier CSS séparé, qui est plus facile à maintenir que CSS en JavaScript (et vous pouvez utiliser vos bons vieux noms de propriétés CSS).

Commencez par créer un fichier CSS qui se termine par.module.css, par exempleButton.module.css. Un excellent choix est de lui donner le même nom que le composant que vous allez styliser

Ajoutez votre CSS ici, puis importez-le dans le fichier composant que vous souhaitez styliser:

import style from './Button.module.css'

maintenant vous pouvez l'utiliser dans votre JSX:

const Button = () => {
  return <button className={style.content}>A button</button>
}

C'est tout! Dans le balisage résultant, React générera une classe spécifique et unique pour chaque composant rendu et affectera le CSS à cette classe, de sorte que le CSS n'affecte pas les autres balisages.

CSS Modules in React

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction:


Tech Wiki en ligne!