Usando React, es típico guardar sus estilos en un archivo CSS global. Esto puede dificultar la ubicación del estilo de componentes específicos, especialmente cuando está trabajando en un proyecto grande. Con componentes con estilo, encontrar el estilo para un componente en particular es fácil porque están en el mismo archivo que el componente.
Veamos cómo configurar e integrar componentes con estilo en su aplicación React.
Instalación de la biblioteca de componentes con estilo
Puede instalar componentes con estilo ejecutando este comando en su terminal:
npm i componentes con estilo
Para instalar componentes con estilo usando yarn, ejecute:
hilo agregar componentes con estilo
Creación de un componente con estilo
Un componente con estilo es como un componente React estándar, con estilos. Hay varios ventajas y desventajas de los componentes con estilo, que es importante tener en cuenta para su correcto uso.
La sintaxis general se ve así:
importar estilizado de"componentes con estilo";
constante ComponentName = estilo. DOMElementTag`
propiedad css: valor css
`
Aquí importas estilizado desde el componente con estilo biblioteca. El estilizado La función es un método interno que convierte el código JavaScript en CSS real. El Nombre del componente es el nombre del componente con estilo. El DOMElementTag es el elemento HTML/JSX que desea diseñar, como div, span, button, etc.
Para crear un botón con estilo utilizando un componente con estilo, primero debe crear un componente de React que contenga un elemento de botón.
Al igual que:
importar Reaccionar de"reaccionar";
funciónBotón() {
devolver (
Ahora puede crear un estilo para el botón usando componentes con estilo:
importar estilizado de"componentes con estilo";
constante StyledButton = styled.button`
relleno: 1movimiento rápido del ojo 0.8movimiento rápido del ojo;
borde-radio: 15píxeles;
color de fondo: gris;
color: #FFFFFF;
tamaño de fuente: 15píxeles;
`
Poniendo todo junto, necesitarás reemplazar el botón etiqueta con el Botón con estilo componente:
importar estilizado de"componentes con estilo";
importar Reaccionar de"reaccionar";constante StyledButton = styled.button`
relleno: 1movimiento rápido del ojo 0.8movimiento rápido del ojo;
borde-radio: 15píxeles;
color de fondo: gris;
color: #FFFFFF;
tamaño de fuente: 15píxeles;
`
funciónBotón() {
devolver (¡¡¡Bienvenido!!!</StyledButton>
)
}
Estilos de anidamiento
También puede anidar estilos cuando trabaje con componentes con estilo. Anidar componentes con estilo es un poco como utilizando el lenguaje de extensión SASS/SCSS. Puede anidar estilos si un componente contiene varias etiquetas de elementos y desea diseñar cada etiqueta individualmente.
Por ejemplo:
importar Reaccionar de'reaccionar';
funciónaplicación() {
devolver (Componentes con estilo</h1>
Bienvenido a componentes con estilo</p>
</div>
)
}
Este código crea un componente que contiene un h1 elemento y un pag elemento.
Puede diseñar estos elementos utilizando la función de estilo anidado de los componentes con estilo:
importar Reaccionar de'reaccionar';
importar estilizado de'componentes con estilo';constante StyledApp = estilo.div`
color: #333333;
alineación de texto: centro;h1 {
tamaño de fuente: 32píxeles;
estilo de fuente: cursiva;
fuente-peso: negrita;
espaciado de letras: 1.2movimiento rápido del ojo;
transformación de texto: mayúsculas;
}pag {
margen-bloque-inicio: 1movimiento rápido del ojo;
tamaño de fuente: 18píxeles;
}
`
funciónaplicación() {
devolver (Componentes con estilo</h1>
Bienvenido a componentes con estilo</p>
</StyledApp>
)
}
Este código usa un componente con estilo y anida el estilo para el h1 y pag etiquetas
Creación y uso de variables
La capacidad de crear variables es una característica notable de la biblioteca de componentes con estilo. Esta capacidad otorga un estilo dinámico donde puede usar variables de JavaScript para determinar estilos.
Para usar variables en componentes con estilo, cree una variable y asígnele un valor de propiedad CSS. Luego puede usar esa variable directamente en su CSS, por ejemplo:
importar estilizado de"componentes con estilo";constante Color principal = "rojo";
constante Encabezado = estilo.h1`
color: ${Color Principal};
`;
funciónaplicación() {
devolver (
<>¡Hola Mundo!</Heading>
</>
);
}
En el bloque de código de arriba, el texto “¡Hola Mundo!” se mostrará en color rojo.
Tenga en cuenta que este ejemplo simplemente usa una variable de JavaScript estándar en un literal de plantilla junto con el componente con estilo. Es un enfoque diferente de usando variables CSS.
Ampliación de estilos
Después de crear un componente con estilo, utilizará el componente. Es posible que desee hacer diferencias sutiles o agregar más estilo en algunas situaciones. En casos como este, puede extender los estilos.
Para extender estilos, envuelve el componente con estilo en el estilizado() constructor y luego incluya cualquier estilo adicional.
En este ejemplo, el BotónPrincipal hereda el estilo del componente Button y agrega un color de fondo diferente de azul.
importar estilizado de"componentes con estilo";
importar Reaccionar de"reaccionar";constante Botón = estilo.botón`
relleno: 1movimiento rápido del ojo 0.8movimiento rápido del ojo;
borde-radio: 15píxeles;
color de fondo: gris;
color: #FFFFFF;
tamaño de fuente: 15píxeles;
`constante PrimaryButton = con estilo (Botón)`
color de fondo: azul;
`
funciónaplicación() {
devolver (
También puede cambiar la etiqueta que representa un componente con estilo usando el como una proposición.
El como prop le permite especificar el elemento HTML/JSX subyacente que representaría el componente con estilo.
Por ejemplo:
importar estilizado de"componentes con estilo";
importar Reaccionar de"reaccionar";constante Botón = estilo.botón`
relleno: 1movimiento rápido del ojo 0.8movimiento rápido del ojo;
borde-radio: 15píxeles;
color de fondo: gris;
color: #FFFFFF;
tamaño de fuente: 15píxeles;
`
funciónaplicación() {
devolver (
Este código hace que el Botón componente como un a elemento, estableciendo su href atribuir a '#'.
Creación de estilos globales
Los componentes con estilo generalmente se limitan a un componente, por lo que es posible que se pregunte cómo diseñar la aplicación como un todo. Puede diseñar la aplicación con el uso de estilo global.
Styled-Components ofrece una crearEstiloGlobal función que le permite declarar estilos globalmente. El crearEstiloGlobal elimina la restricción del estilo del ámbito del componente y le permite declarar estilos que se aplican a cada componente.
Para crear estilos globales, importe el crearEstiloGlobal función y declarar los estilos que necesita.
Por ejemplo:
importar {createGlobalStyle} de'componentes con estilo';constante EstilosGlobales = crearEstiloGlobal`
@importar URL (' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');* {
margen: 0;
relleno: 0;
tamaño de caja: caja de borde;
}cuerpo {
color de fondo: #343434;
tamaño de fuente: 15píxeles;
color: #FFFFFF;
Familia tipográfica: 'Monserrat', sans serif;
}
`
exportarpor defecto estilos globales;
Luego importas el GlobalStyles componente en el componente de su aplicación y renderícelo. renderizando el GlobalStyles componente en el componente de su aplicación aplicará los estilos a su aplicación.
Al igual que:
importar Reaccionar de'reaccionar';
importar GlobalStyles de'./Global';
funciónaplicación() {
devolver (
</div>
)
}
Más to Componentes con estilo
Ha aprendido a configurar, instalar y usar componentes con estilo en su aplicación React. La biblioteca de componentes con estilo es una forma eficiente de diseñar su aplicación React. Proporciona muchas características útiles que permiten flexibilidad en el estilo y un estilo dinámico.
Hay mucho más en los componentes con estilo, como animaciones, y React es un gran marco con mucho que aprender además de eso.
