Como usar componentes estilizados no React

Usando o React, é comum salvar seus estilos em um arquivo CSS global. Isso pode dificultar a localização do estilo de componentes específicos, especialmente quando você está trabalhando em um projeto grande. Com componentes estilizados, é fácil localizar o estilo de um determinado componente porque eles estão no mesmo arquivo que o componente.

Vamos ver como configurar e integrar componentes estilizados em seu aplicativo React.

Instalando a biblioteca styled-components

Você pode instalar styled-components executando este comando em seu terminal:

npm i styled-components


Para instalar styled-components usando yarn, execute:

yarn add styled-components


Criando um componente com estilo

Um componente com estilo é como um componente React padrão, com estilos. Existem vários prós e contras de componentes estilizados, que são importantes considerar para o uso correto.

A sintaxe geral fica assim:

import styled from "styled-components";


const ComponentName = styled.DOMElementTag`
    cssProperty: cssValue
`


Aqui você importa o estilo da biblioteca de componentes de estilo . A função estilizada é um método interno que converte o código JavaScript em CSS real. O ComponentName é o nome do componente com estilo. O DOMElementTag é o elemento HTML/JSX que você pretende estilizar, como div, span, botão, etc.

Para criar um botão com estilo usando um componente com estilo, você deve primeiro criar um componente React contendo um elemento de botão.

Igual a:

import React from "react";


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


Agora você pode criar um estilo para o botão usando styled-components:

import styled from "styled-components";


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

Juntando tudo, você precisará substituir a tag do botão pelo 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 aninhamento

Você também pode aninhar estilos ao trabalhar com componentes estilizados. Aninhar componentes estilizados é um pouco como usar a linguagem de extensão SASS/SCSS. Você pode aninhar estilos se um componente contiver várias tags de elemento e quiser estilizar cada tag individualmente.

Por exemplo:

import React from 'react';


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


Esse código cria um componente contendo um elemento h1 e um elemento p .

Você pode estilizar esses elementos usando o recurso de estilo aninhado de componentes estilizados:

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>
    )
}


Esse código usa um componente estilizado e aninha o estilo para as tags h1 e p .

Criando e usando variáveis

A capacidade de criar variáveis ​​é um recurso notável da biblioteca styled-components. Essa capacidade concede estilo dinâmico onde você pode usar variáveis ​​JavaScript para determinar estilos.

Para usar variáveis ​​em styled-components, crie uma variável e atribua um valor de propriedade CSS a ela. Você pode usar essa variável diretamente no seu CSS, por exemplo:

import styled from "styled-components";


const MainColor = "red";

function App() {
    return (
        <>
            <Heading>Hello World!</Heading>
        </>
    );
}


No bloco de código acima, o texto “ Hello World! ” será exibido na cor vermelha.

Observe que este exemplo simplesmente usa uma variável JavaScript padrão em um modelo literal em conjunto com o componente estilizado. É uma abordagem diferente do uso de variáveis ​​CSS.

Estendendo Estilos

Depois de criar um componente com estilo, você utilizará o componente. Você pode querer fazer diferenças sutis ou adicionar mais estilo em algumas situações. Em casos como esse, você pode estender estilos.

Para estender estilos, envolva o componente com estilo no construtor styled() e inclua quaisquer estilos adicionais.

Neste exemplo, o componente PrimaryButton herda o estilo do componente Button e adiciona uma cor de fundo 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>
    )
}


Você também pode alterar a tag que um componente estilizado renderiza usando o as a prop.

A propriedade as permite que você especifique o elemento HTML/JSX subjacente que o componente estilizado renderizaria.

Por exemplo:

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>
    )
}


Esse código renderiza o componente Button como um elemento , definindo seu atributo href como ‘#’.

Criando estilos globais

Os componentes estilizados geralmente têm como escopo um componente, portanto, você pode estar se perguntando como estilizar o aplicativo como um todo. Você pode estilizar o aplicativo com o uso de estilo global.

Styled-Components oferece uma função createGlobalStyle que permite declarar estilos globalmente. O createGlobalStyle remove a restrição de estilo com escopo de componente e permite que você declare estilos que se aplicam a todos os componentes.

Para criar estilos globais, importe a função createGlobalStyle e declare os estilos necessários.

Por exemplo:

import {createGlobalStyle} from 'styled-components';


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

export default GlobalStyles;


Em seguida, você importa o componente GlobalStyles para o componente do aplicativo e o renderiza. A renderização do componente GlobalStyles em seu componente de aplicativo aplicará os estilos ao seu aplicativo.

Igual a:

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


function App() {
    return (
        <div>
            <GlobalStyles />
        </div>
    )
}


Mais para Componentes estilizados

Você aprendeu como configurar, instalar e usar styled-components em seu aplicativo React. A biblioteca styled-components é uma maneira eficiente de estilizar seu aplicativo React. Ele fornece muitos recursos úteis que permitem flexibilidade no estilo e no estilo dinâmico.

Há muito mais em componentes estilizados, como animações, e o React é uma grande estrutura com muito a aprender além disso.