Cómo usar la emoción para dar estilo en React

Introducción

React te permite aplicar estilo a los componentes directamente con la stylepropiedad. En la mayoría de las situaciones, stylebasta con usar la propiedad para pasar un objeto de propiedades CSS.

Sin embargo, para situaciones que requieren funciones de estilo más exigentes, emotionpuede proporcionar una solución. emotiones una biblioteca CSS-in-JS flexible y de alto rendimiento. Acepta cadenas y objetos, admite variables predeterminadas y extendidas y, con un complemento Babel adicional, incluso admite selectores secundarios en línea.

En este artículo, creará una aplicación React que utiliza los paquetes @emotion/reacty @emotion/styledpara diseñar.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Un entorno de desarrollo local para Node.js. Sigue Cómo instalar Node.js y crear un entorno de desarrollo local .

Nota: En este artículo se recomendaban anteriormente los paquetes emotiony react-emotion. Ahora, con varias versiones posteriores, @emotion/reacty @emotion/styledson el enfoque moderno.

Este tutorial fue verificado con Node v15.3.0, npmv7.4.0, reactv17.0.1, @emotion/reactv11.1.4 y @emotion/styledv11.0.0.

Paso 1: Configuración del proyecto

Comience a usar create-react-apppara generar una aplicación React y luego instale las dependencias:

npx create-react-app react-emotion-example

Cambiar al nuevo directorio del proyecto:

cd react-emotion-example

A continuación, instale @emotion/reacty @emotion/styledmediante npm:

npm install @emotion-react@11.1.4 @emotion/styled@11.0.0

En este punto, tendrás un nuevo proyecto React con @emotion/react.

Paso 2: Uso del cssaccesorio

emotionProporciona una csspropiedad que puede aceptar selectores anidados y consultas de medios. Puede admitir un objeto o una plantilla literal etiquetada.

Abra el App.jsarchivo en su editor de código y modifíquelo para usar divs con la csspropiedad:

fuente/App.js

/** @jsxImportSource @emotion/react */import { css } from '@emotion/react';function App() {  return (    div      div css={css({        margin: 10,        padding: 10,        backgroundColor: '#eee',      })}        This is an example of code`css`/code using an object.      /div      div css={css`        margin: 10px;        padding: 10px;        background-color: #eee;      `}        This is an example of code`css`/code using a tagged template literal.      /div    /div  );}export default App;

El primer ejemplo utiliza un objeto con propiedades y valores de objeto de estilo. El segundo ejemplo utiliza un literal de plantilla etiquetado con reglas CSS.

Nota: Dado que este tutorial se basa en Create React App 4, es necesario especificar /** @jsxImportSource @emotion/react */. Este comentario le indica a Babel que personalice la importación automática del entorno de ejecución.

Ejecute la aplicación:

npm start

Observa la aplicación en tu navegador. Esto producirá dos divs idénticos con diez píxeles de margin, diez píxeles de paddingy color de fondo gris.

Paso 3: Uso de los styledcomponentes

emotionTambién admite un styledcomponente para crear un elemento y darle estilo. También puede admitir un objeto o una plantilla literal etiquetada.

Consideremos un Headingcomponente que genera un h1elemento de encabezado y acepta propiedades bg(fondo) y fg(primer plano) que establecerán background-colory color:

const Heading = styled('h1')`  background-color: ${props = props.bg};  color: ${props = props.fg};`;

Al utilizar este Headingcomponente, podrá pasar valores de color a bgy fg:

Heading bg="#008f68" fg="#fae042"  Heading with a green background and yellow text./Heading

Vuelva App.jsa visitar su editor de código y modifíquelo para usar styledcomponentes:

fuente/App.js

import styled from '@emotion/styled';const Heading = styled('h1')`  background-color: ${props = props.bg};  color: ${props = props.fg};`;function App() {  return (    div      Heading bg="#008f68" fg="#fae042"        Heading with a green background and yellow text.      /Heading    /div  );}export default App;

Este código dará como resultado un h1elemento con un fondo verde y texto amarillo.

A continuación, considere un Subheadingcomponente que extiende el Headingcomponente y cambia el texto representado usando withComponent:

const Subheading = Heading.withComponent('h2');

En lugar de un h1encabezado, el componente se representará con un h2encabezado.

Este código producirá un h2con colores predeterminados:

Subheading  Subheading with default colors./Subheading

Este código producirá un h2texto verde claro:

Subheading fg="#6db65b"  Subheading with light green text./Subheading

Este código producirá un h2fondo verde claro:

Subheading bg="#6db65b"  Subheading with light green background./Subheading

Puede especificar sus estilos como un objeto en lugar de como una cadena:

const Quote = styled('blockquote')(props = ({  fontSize: props.size,}));

E incluso incluye un objeto de estilos predeterminados:

const Cite = styled('cite')(  {    fontWeight: 100  },  props = ({    fontWeight: props.weight  }));

Esto se puede configurar opcionalmente al utilizar el componente.

Este código utiliza el fontWeightvalor predeterminado:

Cite  Citation with light text!/Cite

Este código proporciona una weightpropiedad que anula el fontWeightvalor predeterminado:

Cite weight={700}  Citation with heavy text!/Cite

Con emotionpuedes especificar !importantestilos:

const Footer = styled('footer')`  margin-top: 50px !important;`;

Este código produce un footerelemento con un tamaño margin-topde 50 píxeles.

Paso 4: Uso de cssaccesorios y styledcomponentes

Ahora, reflexiona sobre lo que has aprendido en los ejemplos anteriores y utiliza esos conceptos para construir un componente que utilice cssaccesorios y styledcomponentes.

Vuelva a visitar App.jssu editor de código y reemplace el contenido con las siguientes líneas de código:

fuente/App.js

/** @jsxImportSource @emotion/react */import { css } from '@emotion/react';import styled from '@emotion/styled';const Heading = styled('h1')`  background-color: ${props = props.bg};  color: ${props = props.fg};`;const Subheading = Heading.withComponent('h2');const Quote = styled('blockquote')(props = ({  fontSize: props.size}));const Cite = styled('cite')(  {    fontWeight: 100  },  props = ({    fontWeight: props.weight  }));const Footer = styled('footer')`  border-top: 1px solid #ccc;  color: #ccc;  margin-top: 50px !important;  padding-top: 20px;`;function App() {  return (    div css={css`background: #ddd;`}      div css={css({ padding: 10 })}        Heading bg="#008f68" fg="#fae042"          Quotations        /Heading        Subheading fg="#6db65b"          For React Developers        /Subheading        Quote size={28}          I built this with code`emotion/react`/code and code`emotion/styled`/code!        /Quote        Cite weight={700}Sammy/Cite        FooterShark Facts/Footer      /div    /div  );}export default App;

Este código utiliza componentes cssy accesorios styledcon cadenas y objetos. También utiliza styledcomponentes de extensión mediante el uso withComponenty la anulación styledde componentes con valores predeterminados.

Conclusión

En este artículo, creó una aplicación React que utiliza los paquetes @emotion/reacty @emotion/styledpara diseñar.

Si desea obtener más información sobre React, eche un vistazo a nuestra serie Cómo codificar en React.js o consulte nuestra página de temas de React para ver ejercicios y proyectos de programación.