Introducció
En els projectes d'interfície que rarament requereixen una aplicació d'una sola pàgina, els estils en línia dels elements DOM sovint es col·loquen a l'element de destinació. >' atribut.
Però a React, les coses són molt diferents pel que fa a l'estil en línia. Aquesta guia se centra a aconseguir-ho mitjançant un exemple real de creació d'un component de targeta de perfil d'usuari.
Components d'estil a React
És possible que ja coneixeu la manera habitual d'estilitzar els components de React mitjançant l'atribut classname juntament amb un full d'estil extern:
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
Estils en línia
Aconseguir el mateix resultat amb estils en línia funciona de manera molt diferent. Per utilitzar estils en línia a React, utilitzeu l'atribut style, que accepta un objecte JavaScript amb propietats camel. Exemple:
function MyComponent(){ return Inline Styled Component } Tingueu en compte que el valor de farciment no té una unitat perquè React afegeix a 'px ' sufix a algunes propietats numèriques d'estil en línia. En els casos en què necessiteu utilitzar altres unitats, com ara 'em' o 'rem', especifiqueu explícitament la unitat amb el valor com a cadena. Aplicar això a la propietat de farciment hauria de ser farciment: '1,5 em' .
A més, aquests estils no tenen prefixos de proveïdors automàticament, de manera que heu d'afegir prefixos de proveïdors manualment.
Millorar la llegibilitat
La llegibilitat de MyComponent disminueix dràsticament si els estils es fan massa i tot es torna maldestre. Com es mostra a continuació, com que els estils són només objectes, es poden eliminar del component.
const myComponentStyle = { color: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return Inline Styled Component } jsx
Construcció d'un component de targeta
Construïm el component de la targeta d'usuari.
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> } Regla d'or
La documentació oficial de React parla d'utilitzar l'estil en línia com a mitjà principal per dissenyar projectes i recomana utilitzar l'atribut className.
Nota Alguns exemples de la documentació utilitzen un estil per comoditat, però generalment no es recomana utilitzar l'atribut style com a mitjà principal dels elements d'estil.
En la majoria dels casos, nom de classe s hauria de fer referència a classes definides en un full d'estil CSS extern. Els estils s'utilitzen sovint a les aplicacions React per afegir estils calculats de manera dinàmica en temps de renderització.