Cómo usar componentes con estilo en React

Al usar React, es típico guardar sus estilos en un archivo CSS global. Esto puede dificultar la localización del estilo de componentes específicos, especialmente cuando se trabaja 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 styled-components


Para instalar componentes con estilo usando yarn, ejecute:

yarn add styled-components


Creación de un componente con estilo

Un componente con estilo es como un componente React estándar, con estilos. Hay varios pros y contras de los componentes con estilo, que es importante tener en cuenta para un uso correcto.

La sintaxis general se ve así:

import styled from "styled-components";


const ComponentName = styled.DOMElementTag`
    cssProperty: cssValue
`


Aquí importa con estilo desde la biblioteca de componentes con estilo . La función con estilo es un método interno que convierte el código JavaScript en CSS real. ComponentName 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:

import React from "react";


function Button() {
    return (
        <button>Welcome!!!</button>
    )
}


Ahora puede crear un estilo para el botón usando componentes con estilo:

import styled from "styled-components";


const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

Al poner todo junto, deberá reemplazar la etiqueta del botón con el componente StyledButton :

import styled from "styled-components";
import React from "react";


const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function Button() {
    return (
        <StyledButton>Welcome!!!</StyledButton>
    )
}


Estilos de anidamiento

También puede anidar estilos cuando trabaje con componentes con estilo. Anidar componentes con estilo es un poco como usar 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:

import React from 'react';


function App() {
    return (
        <div>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </div>
    )
}


Este código crea un componente que contiene un elemento h1 y un elemento p .

Puede diseñar estos elementos utilizando la función de estilo anidado de los componentes con estilo:

import React from 'react';
import styled from 'styled-components';


const StyledApp = styled.div`
    color: #333333;
    text-align: center;

function App() {
    return (
        <StyledApp>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </StyledApp>
    )
}


Este código utiliza un componente con estilo y anida el estilo de las etiquetas h1 y p .

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:

import styled from "styled-components";


const MainColor = "red";

function App() {
    return (
        <>
            <Heading>Hello World!</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 al uso de 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 constructor styled() y luego incluye cualquier estilo adicional.

En este ejemplo, el componente PrimaryButton hereda el estilo del componente Button y agrega un color de fondo azul diferente.

import styled from "styled-components";
import React from "react";


const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button>Welcome</Button>
        <PrimaryButton>Hello There!</PrimaryButton>
    )
}


También puede cambiar la etiqueta que representa un componente con estilo utilizando como accesorio.

El as prop le permite especificar el elemento HTML/JSX subyacente que representaría el componente con estilo.

Por ejemplo:

import styled from "styled-components";
import React from "react";


const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button as='a' href='#'>Welcome</Button>
    )
}


Este código representa el componente Button como un elemento, estableciendo su atributo href en ‘#’.

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 función createGlobalStyle que le permite declarar estilos globalmente. El createGlobalStyle 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, importa la función createGlobalStyle y declara los estilos que necesita.

Por ejemplo:

import {createGlobalStyle} from 'styled-components';


const GlobalStyles = createGlobalStyle`
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

export default GlobalStyles;


Luego, importa el componente GlobalStyles en el componente de su aplicación y lo renderiza. Al representar el componente GlobalStyles en el componente de su aplicación, se aplicarán los estilos a su aplicación.

Al igual que:

import React from 'react';
import GlobalStyles from './Global';


function App() {
    return (
        <div>
            <GlobalStyles />
        </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.