Introduction
Dans les projets frontend qui nécessitent rarement une application d'une seule page, les styles en ligne des éléments DOM sont souvent placés dans le fichier de l'élément cible. >' attribut.
Mais dans React, les choses sont assez différentes en ce qui concerne le style en ligne. Ce guide se concentre sur cet objectif à l'aide d'un exemple concret de création d'un composant de carte de profil utilisateur.
Composants de style dans React
Vous connaissez peut-être déjà la manière habituelle de styliser les composants React en utilisant l'attribut classname en conjonction avec une feuille de style externe :
import React from 'react' import './style.css' function myComponent(){ return( return <p classname="paragraph-text">ClassName Styled Text</p> ) } jsx
paragraph-text{ font-weight: bold; color: beige; } CSS
Styles en ligne
Obtenir le même résultat avec les styles en ligne fonctionne de manière très différente. Pour utiliser des styles en ligne dans React, utilisez l'attribut style, qui accepte un objet JavaScript avec des propriétés camel. Exemple:
function MyComponent(){ return Inline Styled Component } Notez que la valeur de remplissage n'a pas d'unité car React ajoute un 'px 'suffixe à certaines propriétés numériques de style en ligne. Dans les cas où vous devez utiliser d'autres unités, telles que « em » ou « rem », spécifiez explicitement l'unité avec la valeur sous forme de chaîne. Appliquer ceci à la propriété padding devrait être padding : '1,5em' .
De plus, ces styles ne sont pas automatiquement préfixés par le fournisseur, vous devez donc ajouter les préfixes du fournisseur manuellement.
Améliorer la lisibilité
La lisibilité de MyComponent diminue considérablement si les styles deviennent trop nombreux et que tout devient maladroit. Comme indiqué ci-dessous, puisque les styles ne sont que des objets, ils peuvent être supprimés du composant.
const myComponentStyle = { color: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return Inline Styled Component } jsx
Construire un composant de carte
Construisons le composant de la carte utilisateur.
const cardStyles = { container: { display: 'flex', height: 100, width: 400, boxShadow: '0 0 3px 2px #cec7c759', alignItems: 'center', padding: 20, borderRadius: 20, }, profilePicture: { display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'orange', color: 'white', height: 20, width: 20, borderRadius: '50%', padding: 10, fontWeight: 'bold', }, bio: { marginLeft: 10, }, userName: { fontWeight: 'bold', }, }; function userCardComponent(){ <span style="{cardStyles.profilePicture}">D</span> <p style="{cardStyles.userName}">Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> } Règle générale
La documentation officielle de React déconseille d'utiliser le style en ligne comme principal moyen de styliser les projets et recommande d'utiliser l'attribut className à la place.
Remarque Certains exemples de la documentation utilisent un style pour plus de commodité, mais il n'est généralement pas recommandé d'utiliser l'attribut style comme principal moyen de styliser les éléments.
Dans la plupart des cas, nom du cours s doit faire référence à des classes définies dans une feuille de style CSS externe. Les styles sont souvent utilisés dans les applications React pour ajouter des styles calculés dynamiquement au moment du rendu.