Estamos todos familiarizados com a forma padrão de vinculando uma folha de estilo ao <head> de um documento HTML, certo? Essa é apenas uma das várias maneiras pelas quais podemos escrever CSS. Mas como é estilizar as coisas em um aplicativo de página única (SPA), digamos em um projeto React?
Acontece que existem várias maneiras de estilizar um aplicativo React. Alguns se sobrepõem ao estilo tradicional, outros nem tanto. Mas vamos contar todas as maneiras que podemos fazer isso.
Importando folhas de estilo externas
Como o nome sugere, o React pode importar arquivos CSS. O processo é semelhante a como vinculamos o arquivo CSS no HTML <head>:
- Crie um novo arquivo CSS no diretório do seu projeto.
- Escreva CSS.
- Importe-o para o arquivo React.
Gosto disto:
import "./style.css";Isso geralmente vai no topo do arquivo onde outras importações acontecem:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;Neste exemplo, um arquivo CSS é importado para um App.js do /Components/css pasta.
Escrever estilos embutidos
Você pode estar acostumado a ouvir que o estilo inline não é tão bom para manutenção e outros enfeites, mas definitivamente existem situações (aqui está um!) onde faz sentido. E a manutenção é um problema menor no React, já que o CSS geralmente já fica dentro do mesmo arquivo de qualquer maneira.
Este é um exemplo super simples de estilo inline no React:
<div className="main" style={{color:"red"}}>Uma abordagem melhor, porém, é usar objetos:
- Primeiro, crie um objeto que contenha estilos para diferentes elementos.
- Em seguida, adicione-o a um elemento usando o
styleatributo e, em seguida, selecione a propriedade para estilizar.
Vamos ver isso no contexto:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;Este exemplo contém um styles objeto contendo mais dois objetos, um para o .main class e outro para uma entrada de texto, que contém regras de estilo semelhantes ao que esperamos ver em uma folha de estilo externa. Esses objetos são então aplicados ao style atributo de elementos que estão na marcação retornada.
Observe que as chaves são usadas ao fazer referência a estilos em vez das aspas que normalmente usaríamos em HTML simples.
Usar módulos CSS
Módulos CSS… o que diabos aconteceu com eles, certo? Eles têm o benefício de variáveis com escopo local e podem ser usados junto com o React. Mas o que eles são, novamente, exatamente?
Citando o documentação do repositório:
Módulos CSS funciona compilando arquivos CSS individuais em CSS e dados. A saída CSS é CSS normal e global, que pode ser injetado diretamente no navegador ou concatenado e gravado em um arquivo para uso em produção. Os dados são usados para mapear os nomes legíveis que você usou nos arquivos para o CSS de saída globalmente seguro.
Em termos mais simples, CSS Modules nos permite usar o mesmo nome de classe em vários arquivos sem conflitos, pois cada nome de classe recebe um nome programático exclusivo. Isso é especialmente útil em aplicações maiores. Cada nome de classe tem escopo local para o componente específico no qual está sendo importado.
Uma folha de estilo do módulo CSS é semelhante a uma folha de estilo normal, apenas com uma extensão diferente (por exemplo, styles.module.css). Veja como eles são configurados:
- Crie um arquivo com
.module.csscomo a extensão. - Importe esse módulo para o aplicativo React (como vimos anteriormente)
- Adicionar uma
classNamea um elemento ou componente e referenciar o estilo específico dos estilos importados.
Exemplo super simples:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;Usar componentes com estilo
Você já usou componentes estilizados? É bastante popular e permite que você crie componentes personalizados usando CSS real em seu JavaScript. Um componente com estilo é basicamente um componente React com - prepare-se para isso - estilos. Alguns dos recursos incluem nomes de classe exclusivos, estilo dinâmico e melhor gerenciamento do CSS, pois cada componente tem seus próprios estilos separados.
Instale o pacote npm styled-components na linha de comando:
npm install styled-componentsEm seguida, importe-o para o aplicativo React:
import styled from 'styled-components'Crie um componente e atribua uma propriedade estilizada a ele. Observe o uso de literais de modelo denotados por acentos graves no Wrapper objeto:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;O referido Wrapper componente será renderizado como um div que contém esses estilos.
Estilo condicional
Uma das vantagens dos styled-components é que os próprios componentes são funcionais, já que você pode usar props dentro do CSS. Isso abre a porta para declarações condicionais e alteração de estilos com base em um estado ou prop.
Aqui está uma demonstração mostrando isso:
Aqui, estamos manipulando os div's display propriedade no estado de exibição. Este estado é controlado por um botão que alterna o estado do div quando clicado. Isso, por sua vez, alterna entre os estilos de dois estados diferentes.
Em linha if declarações, usamos um ? em vez do habitual if/else sintaxe. o else parte é após o ponto e vírgula. E lembre-se de sempre chamar ou usar o estado depois de inicializado. Nessa última demonstração, por exemplo, o estado deve estar acima do Wrapper estilos do componente.
Feliz estilo React!
Isso é um embrulho, pessoal! Analisamos várias maneiras diferentes de escrever estilos em um aplicativo React. E não é como se um fosse melhor do que o resto; a abordagem que você usa depende da situação, é claro. Espero que agora você tenha um bom entendimento deles e saiba que você tem um monte de ferramentas em seu arsenal de estilo React.
