Introducción
En proyectos frontend que rara vez requieren una aplicación de una sola página, los estilos en línea de los elementos DOM a menudo se colocan en el elemento de destino. >' atributo.
Pero en React, las cosas son bastante diferentes con respecto al estilo en línea. Esta guía se centra en lograr esto utilizando un ejemplo del mundo real de creación de un componente de Tarjeta de perfil de usuario.
Diseñar componentes en React
Es posible que ya conozca la forma habitual de diseñar componentes de React utilizando el atributo de nombre de clase junto con una hoja de estilo externa:
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
Estilos en línea
Obtener el mismo resultado con estilos en línea funciona de manera bastante diferente. Para usar estilos en línea en React, use el atributo de estilo, que acepta un objeto JavaScript con propiedades camel. Ejemplo:
function MyComponent(){ return Inline Styled Component } Tenga en cuenta que el valor de relleno no tiene una unidad porque React agrega una 'px ' sufijo a algunas propiedades numéricas de estilo en línea. En los casos en los que necesite utilizar otras unidades, como 'em' o 'rem', especifique explícitamente la unidad con el valor como una cadena. Aplicar esto a la propiedad padding debería ser padding: '1,5em' .
Además, estos estilos no tienen prefijos de proveedor automáticamente, por lo que debe agregar prefijos de proveedor manualmente.
Mejorar la legibilidad
La legibilidad de MyComponent cae drásticamente si los estilos se vuelven demasiados y todo se vuelve complicado. Como se muestra a continuación, dado que los estilos son solo objetos, se pueden eliminar del componente.
const myComponentStyle = { color: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return Inline Styled Component } jsx
Construyendo un componente de tarjeta
Construyamos el componente de tarjeta de usuario.
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 de oro
La documentación oficial de React critica el uso de estilos en línea como medio principal para diseñar proyectos y recomienda usar el atributo className en su lugar.
Nota Algunos ejemplos en la documentación usan un estilo por conveniencia, pero generalmente no se recomienda usar el atributo de estilo como medio principal para diseñar elementos.
En la mayoría de los casos, nombre de la clase s deben hacer referencia a clases definidas en una hoja de estilo CSS externa. Los estilos se utilizan a menudo en las aplicaciones React para agregar estilos calculados dinámicamente en el momento del renderizado.