Como estilizar componentes do React com CSS

Você pode estilizar seus aplicativos e páginas do React usando várias técnicas. O mais fácil seria baixar uma biblioteca de componentes React. No entanto, mesmo ao usar bibliotecas, mais cedo ou mais tarde você precisará adicionar estilos personalizados. Então, qual é a melhor maneira de fazê-lo?

Para projetos de pequena escala, você pode estilizar seu aplicativo confortavelmente usando estilos Inline , Módulos ou escrevendo especificações className por conta própria. E para projetos dinâmicos – como aplicativos – é melhor usar uma biblioteca que permita implementar props facilmente.

Alternativamente, você pode usar um kit utilitário como o Tailwind UI, que vem com estilos pré-construídos. Se você precisar renderizar uma maquete ou uma apresentação, os kits de interface do usuário compatíveis com React são o caminho a percorrer.

Estilo prático com className

No React, estilos CSS práticos são aplicados através da propriedade className .

Isso também é o equivalente a usar uma folha de estilo para seu projeto. Como o React é orientado pela estrutura do componente, você pode importar suas folhas de estilo apenas para necessidades específicas.

Vejamos um exemplo.

App.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

App.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

E este seria o resultado:

É uma técnica de baunilha completamente válida. E é usado com mais frequência para declarar variáveis ​​globais que você reutilizará nos componentes principais.

A única ressalva é que, à medida que seu projeto cresce, aumenta também o potencial de conflitos de nomenclatura.

Da mesma forma, o custo de eficiência do gerenciamento de centenas de folhas de estilo é absurdamente alto.

Usando JSX para estilos embutidos

O React permite estilizar elementos DOM usando estilos inline. Enquanto a lógica CSS permanece a mesma, o estilo em si tem que passar pelo JavaScript. Isso também é conhecido como JSX.

Vejamos um exemplo:

Título.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

Uma coisa que você notará é que, em vez de escrever line-height , usamos lineHeight .

A explicação para isso é que, “Como o JSX está mais próximo do JavaScript do que do HTML, o React DOM usa a convenção de nomenclatura de propriedades camelCase em vez de nomes de atributos HTML”. .

Estilos embutidos são normalmente usados ​​para mostrar exemplos, mas também para adicionar estilos dinâmicos a elementos específicos. Além disso, estilos inline não suportam pseudo-elementos ou consultas de mídia, pois você só pode passar style . Usar uma folha de estilo é uma alternativa melhor.

Criando escopo local com módulos CSS

Se você deseja aplicar estilos personalizados a componentes sem colisões de nomes, uma maneira de fazer isso é por meio de Módulos CSS.

Essa é uma abordagem na qual você pode aplicar o escopo local a cada componente individualmente.

Igual a:

Cabeçalho.módulo.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

Header.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

Você também pode fazer coisas como composição , onde você chama um estilo específico de outra folha de estilo – evitando a necessidade de reescrever a mesma lógica duas vezes.

 .header { composes: header from './style.css'; }

CSS em JS

Ao contrário de frameworks como Vue e Svelte, o React não fornece sua própria interface de estilo.

Portanto, embora você possa escrever CSS para componentes usando os métodos mencionados acima, a abordagem do Santo Graal é usar CSS em bibliotecas JS. Cada biblioteca tem seus pontos fortes e fracos, mas geralmente os benefícios permanecem os mesmos:

• Adereços para várias variações de estilo.
• Tema acessível.
• Escopo de estilo baseado em componentes.
• Variáveis ​​CSS dinâmicas usando funções JavaScript.

A solução mais popular para CSS em JS é o Styled Components.

E outras escolhas notáveis ​​incluem Emotion e Linaria. Para fins de demonstração, vamos ver como o CSS é integrado a um componente React usando a biblioteca Styled Components.

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

Primeiro, criamos um novo componente chamado HeaderWrapper que renderizará um contêiner <section> para nosso título de cabeçalho. Em seguida, criamos outro componente chamado HeaderTitle e passamos as variáveis ​​CSS para ele. Então, de certa forma, isso é exatamente o mesmo que trabalhar com Web Components, apenas no contexto do React.

Usando uma estrutura CSS

Não é que tudo no front-end esteja se movendo para frameworks e bibliotecas.

Tem mais a ver com o fato de que iniciar um projeto do nada é ineficiente. Um framework como o Tailwind CSS ajuda a aliviar a necessidade de escrever todas as estruturas do seu aplicativo do zero. A maneira como o Tailwind CSS funciona é que a estrutura fornece classes de utilitários pré-determinadas, permitindo que você estruture um layout sem precisar escrever CSS independente.

Tailwind CSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

Portanto, em vez de definir o estilo do componente usando Constants , podemos escrever diretamente o estilo conforme especificado pelo framework. Um método como esse é extremamente eficiente e você pode, por exemplo, importar componentes de interface do usuário (como cartões) feitos por outras pessoas.

Tailwind CSS é particularmente popular porque você pode copiar e colar trechos diretamente e usá-los no design do seu aplicativo sem quaisquer consequências.

Usando uma biblioteca de interface do usuário

O último método para estilizar componentes React é usar uma biblioteca de interface do usuário. Ao contrário de uma estrutura, uma biblioteca de interface do usuário segue as diretrizes de estilo. Então, de várias maneiras, ele vem com um estilo que já está pré-determinado. Os gostos de Mantine e Material UI são algumas das opções de escolha.

A única “desvantagem” é que você precisa gastar bastante tempo aprendendo essa biblioteca específica. Mas, o mesmo pode ser dito para os frameworks. Apesar da barreira de entrada, tanto os frameworks CSS quanto as bibliotecas de interface do usuário são o padrão-ouro no estilo de componentes React.