Como estilizar componentes do React usando módulos CSS

Como estilizar componentes do React usando módulos CSS

Os módulos CSS fornecem uma maneira de definir o escopo local dos nomes das classes CSS. Você não precisa se preocupar em substituir estilos ao usar o mesmo nome de classe.





Descubra como os módulos CSS funcionam, por que você deve usá-los e como implementá-los em um projeto React.



O que são módulos CSS?

o Documentos de módulos CSS descrevem um módulo CSS como um arquivo CSS cujos nomes de classe têm escopo local por padrão. Isso significa que você pode endereçar variáveis ​​CSS com o mesmo nome em diferentes arquivos CSS.





Você escreve classes de módulo CSS como classes normais. Em seguida, o compilador gera nomes de classe exclusivos antes de enviar o CSS para o navegador.

Por exemplo, considere a seguinte classe .btn em um arquivo chamado styles.modules.css:



.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

Para usar este arquivo, você precisa importá-lo para um arquivo JavaScript.

import styles from "./styles.module.js"

Agora, para referenciar a classe .btn e disponibilizá-la em um elemento, você usaria a classe conforme mostrado abaixo:



class="styles.btn"

O processo de compilação substituirá a classe CSS por um nome exclusivo do formato como _styles__btn_118346908.

A exclusividade dos nomes de classe significa que, mesmo que você use o mesmo nome de classe para componentes diferentes, eles não colidirão. Você pode garantir maior independência de código, pois pode armazenar os estilos CSS de um componente em um único arquivo, específico para esse componente.



Isso simplifica a depuração, especialmente se você estiver trabalhando com várias folhas de estilo. Você só precisará rastrear o módulo CSS para um componente específico.

Os módulos CSS também permitem combinar várias classes através do compõe palavra-chave. Por exemplo, considere a seguinte classe .btn acima. Você poderia “estender” essa classe em outras classes usando composições.

Para um botão de envio, você poderia ter:

O botão do controlador do Xbox One não funciona 
.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

Isso combina as classes .btn e .submit. Você também pode compor estilos de outro módulo CSS como este:

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

Observe que você deve escrever a regra de composição antes de outras regras.

Como usar módulos CSS no React

Como você usa módulos CSS no React depende de como você cria o aplicativo React.

Se você usa create-react-app, os módulos CSS são configurados imediatamente. No entanto, se você for criar o aplicativo do zero, precisará configurar os módulos CSS com um compilador como o webpack.

Para acompanhar este tutorial, você deve ter:

  • Node instalado em sua máquina.
  • Uma compreensão básica dos módulos ES6.
  • Um basico Entendendo o React .

Criando um aplicativo React

Para manter as coisas simples, você pode usar criar-reagir-aplicativo para montar um aplicativo React.

Execute este comando para criar um novo projeto React chamados módulos react-css:

npx create-react-app react-css-modules

Isso irá gerar um novo arquivo chamado react-css-modules com todas as dependências necessárias para começar com o React.

Criando um componente de botão

Você criará um componente Button e um módulo CSS chamado Button.module.css nesta etapa. Na pasta src, crie uma nova pasta chamada Components. Nessa pasta crie outra pasta chamada Button. Você adicionará o componente Button e seus estilos nesta pasta.

Navegar para src/Componentes/Botão e crie Button.js.

vale a pena comprar um ps4 pro 
export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

Em seguida, crie um novo arquivo chamado Button.module.css e adicione o seguinte.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

Para usar essa classe no componente Button, importe-a como estilos e faça referência a ela no nome da classe do elemento button assim:

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</button> 
    ) 
}

Este é um exemplo simples que mostra como usar uma única classe. Você pode querer compartilhar estilos em diferentes componentes ou até mesmo combinar classes. Para isso, você pode usar a palavra-chave composes conforme mencionado anteriormente neste artigo.

Usando Composição

Primeiro, modifique o componente Button com o código a seguir.

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</button> 
    ) 
}

Esse código torna o componente Button mais dinâmico aceitando um valor de tipo como prop. Esse tipo determinará o nome da classe aplicado ao elemento de botão. Portanto, se o botão for um botão de envio, o nome da classe será “enviar”. Se for “erro”, o nome da classe será “erro”, e assim por diante.

Para utilizar a palavra-chave composes em vez de escrever todos os estilos para cada botão do zero, adicione o seguinte a Button.module.css.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #FFFFFF; 
}

Neste exemplo, a classe primária e a classe secundária utilizam a classe btn. Ao fazer isso, você reduz a quantidade de código que precisa escrever.

Você pode levar isso ainda mais longe com um módulo CSS externo chamado cores.módulo.css , contendo as cores utilizadas na aplicação. Você poderia então usar este módulo em outros módulos. Por exemplo, crie o arquivo colors.module.css na raiz da pasta Componentes com o seguinte código:

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

Agora no arquivo Button/Button.module.css, modifique as classes primária e secundária para usar as classes acima assim:

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.module.css"; 
}

Sass com módulos CSS

Você pode usar módulos CSS para melhorar a modularidade de sua base de código. Como exemplo, você pode criar uma classe CSS simples para um componente de botão e reutilizar classes CSS por meio da composição.

Para potencializar o uso de módulos CSS, use Sass. Sass—Syntactically Awesome Style Sheets—é um pré-processador CSS que fornece vários recursos. Eles incluem suporte para aninhamento, variáveis ​​e herança que não estão disponíveis em CSS. Com o Sass, você pode adicionar recursos mais complexos ao seu aplicativo.