Diseñar su aplicación React.js usando emoción

Diseñar una aplicación React puede ser un desafío, especialmente si desea mantener sus estilos organizados y fáciles de mantener. Para ayudar a simplificar este proceso, la biblioteca de emociones proporciona una abstracción de alto nivel además de CSS.

¿Qué es la emoción?

Emotion es una biblioteca para diseñar aplicaciones React que proporciona una forma simple y eficiente de administrar sus estilos. Le permite escribir CSS en JavaScript y proporciona una API flexible para diseñar sus componentes.

Uno de los principales beneficios de usar Emotion para diseñar su aplicación React es que proporciona una forma más eficiente de administrar sus estilos. Por ejemplo, puede usar nombres de clase idénticos en múltiples componentes sin el riesgo de que surjan colisiones de nombres. cuando se trabaja con CSS/SASS.

La biblioteca de emociones aplica sus estilos solo a los componentes que los usan en lugar de a toda la página. Esto puede ayudarlo a evitar conflictos con otros estilos en la página y hacer que su código sea más modular y reutilizable.

Cómo instalar la emoción

Para agregar la biblioteca de emociones a su aplicación React, ejecute el siguiente comando de terminal:

npm install --save @emotion/react

La biblioteca de emociones ahora debería estar instalada en su proyecto y lista para usar para diseñar su aplicación React.

Estilismo usando la propiedad css de Emotion

Una vez que haya instalado la biblioteca de emociones, podrá utilizar la CSS prop para diseñar su aplicación React. El CSS prop es similar al prop de estilo, ya que puede pasarle estilos en forma de cadenas u objetos JavaScript regulares.

Para diseñar su aplicación usando el CSS prop, debe importarlo desde el @emoción/reaccionar biblioteca, luego defina sus estilos:

/** @jsxImportSource @emoción/reaccionar */
importar Reaccionar de'reaccionar';
importar {css} de'@emoción/reaccionar';
funciónaplicación() {
devolver (
 relleno: 0.5movimiento rápido del ojo 1movimiento rápido del ojo;
 borde: ninguno;
 familia de fuentes: cursiva;
 borde-radio: 12píxeles;
 color: #333333;
 color de fondo: heredar;
 margen-bloque-inicio: 2movimiento rápido del ojo;
 margen-bloque-fin: 2movimiento rápido del ojo;
`}>
 Haz click en mi
 </button>
 )
}
exportarpor defecto aplicación;

La primera línea de código, /** @jsxImportSource @emoción/reaccionar */, es un comentario particular que debe agregar al archivo JSX para indicar que la biblioteca Emotion debe usarse como pragma JSX para ese archivo.

En JSX, un pragma es una función que transforma la sintaxis de JSX en JavaScript normal. Por defecto, React usa el Reaccionar.createElement funcionar como el pragma JSX. Sin embargo, con el @jsxImportSource comentario, puede especificar un pragma diferente.

En este caso, el @emoción/reaccionar pragma le dice a JSX que use el jsx función de la biblioteca de emociones para transformar el código JSX. Al agregar el comentario pragma a un archivo JSX, puede usar las funciones CSS-in-JS de la biblioteca de emociones en sus componentes.

El componente de botón representa un botón con un estilo personalizado. Aquí el CSS prop agrega el estilo personalizado al elemento del botón.

El CSS prop también admite estilos anidados. El estilo anidado le permite escribir estilos anidados entre sí.

Por ejemplo:

/** @jsxImportSource @emoción/reaccionar */
importar Reaccionar de'reaccionar';
importar {css} de'@emoción/reaccionar';
funciónaplicación() {
devolver (
 relleno: 0.5movimiento rápido del ojo 1movimiento rápido del ojo;
 borde: ninguno;
 familia de fuentes: cursiva;
 borde-radio: 12píxeles;
 color: #333333;
 color de fondo: heredar;
 margen-bloque-inicio: 2movimiento rápido del ojo;
 margen-bloque-fin: 2movimiento rápido del ojo;
 &:flotar{
 color: #e2e2e2;
 color de fondo: #333333;
 }
`}>
 Haz click en mi
 </button>
 )
}
exportarpor defecto aplicación;

En este ejemplo, la declaración del estilo flotante utiliza la función de estilo anidado del CSS apuntalar. El fondo y el color de la fuente en el bloque de código de arriba cambiarán cada vez que pases el cursor sobre el botón.

Pasar estilos de objeto a la propiedad css

El CSS prop también acepta estilos de objeto de JavaScript normales. Al diseñar varios componentes, la utilización de estilos de objeto le permite reutilizar estilos en sus componentes.

Para pasar estilos de objeto al CSS prop, defina los estilos como un objeto JavaScript y páselo al prop:

constante estilo = {
 relleno: '0.5 rem 1 rem',
 borde: 'ninguno',
 Familia tipográfica: 'cursivo',
 bordeRadio: '12 píxeles',
 color: '#333333',
 color de fondo: 'heredar',
 margenBlockStart: '2 rem',
 marginBlockEnd: '2 rem',
'&:flotar': {
 color: '#e2e2e2',
 color de fondo: '#333333',
 }
}
devolver (
"aplicación">
Haz clic en mí</button>
 </div>
);

Tenga en cuenta que los nombres de las propiedades CSS están en mayúsculas y minúsculas en lugar de guiones. Esto se debe a que los estilos se definen como objetos de JavaScript, que usan convenciones de nomenclatura camelCase.

Aplicación de estilo con los componentes con estilo

La biblioteca Emotion también utiliza componentes con estilo al diseñar aplicaciones React. Uso de componentes con estilo es similar a los componentes de React, aparte del hecho de que contienen estilos listos para usar. Para crear componentes con estilo, utilizará el estilizado función.

El estilizado La función le permite crear componentes con estilo reutilizables. Usar el estilizado función, impórtelo desde el emoción/estilo biblioteca.

Para obtener el @emoción/estilo biblioteca en su aplicación, la instalará en su proyecto. Puede hacer esto ejecutando el siguiente comando en la terminal de su proyecto:

npm instalar @emotion/styled

Después de instalar el @emoción/estilo biblioteca, importe el estilizado funcionan y definen sus estilos:

importar estilizado de"@emoción/estilo";
constante Botón = estilo.botón({
 relleno: '0.5 rem 1 rem',
 borde: 'ninguno',
 Familia tipográfica: 'cursivo',
 bordeRadio: '12 píxeles',
 color: '#333333',
 color de fondo: 'heredar',
 margenBlockStart: '2 rem',
 marginBlockEnd: '2 rem',
'&:flotar': {
 color: '#e2e2e2',
 color de fondo: '#333333',
 }
})
exportarpor defecto Botón;

En el bloque de código anterior, un componente con estilo Botón es creado. Puede usar este botón en su aplicación React como cualquier otro componente de React.

Al igual que:

importar Reaccionar de'reaccionar';
importar Botón de'./Botón';
funciónaplicación() {
devolver (



Haz clic en mí</Button>
 </div>
 );
}

exportarpor defecto aplicación;

renderizando el aplicación componente mostrará un botón con los estilos definidos en el Botón componente en su pantalla.

El estilizado La función también acepta estilos de cadena. Se ve diferente del enfoque de estilos de objeto, pero funciona de manera similar.

importar estilizado de"@emoción/estilo";
constante Botón = estilo.botón`
 relleno: 0.5movimiento rápido del ojo 1movimiento rápido del ojo;
 borde: ninguno;
 familia de fuentes: cursiva;
 borde-radio: 12píxeles;
 color: #333333;
 color de fondo: heredar;
 margen-bloque-inicio: 2movimiento rápido del ojo;
 margen-bloque-fin: 2movimiento rápido del ojo;
 &: pasar el cursor {
 color: #e2e2e2;
 color de fondo: #333333;
 }
`
exportarpor defecto Botón;

Estilo eficiente con emoción

Emotion es una poderosa biblioteca para diseñar componentes de React que proporciona una forma simple y eficiente de administrar sus estilos. Ya sea que sea un desarrollador principiante o experimentado, Emotion puede ayudarlo a simplificar el proceso de diseño de su aplicación React y facilitar el mantenimiento y la escala de su código.

Entonces, si está buscando una forma más eficiente y flexible de diseñar sus componentes React, considere Emotion.