Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

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:

fio adicionar componentes estilizados

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 a considerar para o uso correto.

instagram viewer

A sintaxe geral fica assim:

importar estilizado de"componentes de estilo";

const ComponentName = estilizado. DOMElementTag`
 cssProperty: cssValue
`

Aqui você importa estilizado de componente de estilo biblioteca. O estilizado A função é um método interno que converte o código JavaScript em CSS real. O Nome do componente é o nome do componente estilizado. 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:

importar Reagir de"reagir";
funçãoBotão() {
retornar (

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

importar estilizado de"componentes de estilo";
const StyledButton = styled.button`
 preenchimento: 1rem 0.8rem;
 raio da borda: 15px;
 cor de fundo: cinza;
 cor: #FFFFFF;
 tamanho da fonte: 15px;
`

Juntando tudo, você precisará substituir o botão marcar com o StyledButton componente:

importar estilizado de"componentes de estilo";
importar Reagir de"reagir";
const StyledButton = styled.button`
 preenchimento: 1rem 0.8rem;
 raio da borda: 15px;
 cor de fundo: cinza;
 cor: #FFFFFF;
 tamanho da fonte: 15px;
`
funçãoBotão() {
retornar (
Bem vindo!!!</StyledButton>
 )
}

Estilos de aninhamento

Você também pode aninhar estilos ao trabalhar com componentes estilizados. Aninhar componentes estilizados é um pouco como usando 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:

importar Reagir de'reagir';
funçãoAplicativo() {
retornar (


Componentes estilizados</h1>




Bem-vindo ao styled-components</p>
 </div>
 )
}

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

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

importar Reagir de'reagir';
importar estilizado de'componentes de estilo';
const StyledApp = styled.div`
 cor: #333333;
 alinhamento de texto: centro;


 h1 {
 tamanho da fonte: 32px;
 estilo da fonte: itálico;
 intensidade da fonte: Negrito;
 espaçamento entre letras: 1.2rem;
 transformação de texto: maiúsculas; 
 }


 p{
 margin-block-start: 1rem;
 tamanho da fonte: 18px;
 }
`
funçãoAplicativo() {
retornar (

Componentes estilizados</h1>




Bem-vindo ao styled-components</p>
 </StyledApp>
 )
}

Este código usa um componente estilizado e aninha o estilo para o h1 e p Tag.

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:

importar estilizado de"componentes de estilo";
const MainColor = "vermelho";


const Cabeçalho = estilo.h1`
 cor: ${MainColor};
`;
funçãoAplicativo() {
retornar (
 <>
Olá mundo!</Heading>
 </>
 );
}

No bloco de código acima, o texto “Olá Mundo!” 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 de usando 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 estilizado no estilizado() construtor e, em seguida, inclua quaisquer estilos adicionais.

Neste exemplo, o Botão Primário O componente herda o estilo do componente Button e adiciona uma cor de fundo azul diferente.

importar estilizado de"componentes de estilo";
importar Reagir de"reagir";
const Button = style.button`
 preenchimento: 1rem 0.8rem;
 raio da borda: 15px;
 cor de fundo: cinza;
 cor: #FFFFFF;
 tamanho da fonte: 15px;
`


const PrimaryButton = estilizado (Botão)`
 cor de fundo: azul;
`
funçãoAplicativo() {
retornar (

Você também pode alterar a marca que um componente com estilo renderiza usando o como um adereço.

O como prop permite que você especifique o elemento HTML/JSX subjacente que o componente estilizado renderizaria.

Por exemplo:

importar estilizado de"componentes de estilo";
importar Reagir de"reagir";
const Button = style.button`
 preenchimento: 1rem 0.8rem;
 raio da borda: 15px;
 cor de fundo: cinza;
 cor: #FFFFFF;
 tamanho da fonte: 15px;
`
funçãoAplicativo() {
retornar (

Este código renderiza o Botão componente como um a elemento, definindo seu href atribuir a '#'.

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 criarEstiloGlobal função que permite declarar estilos globalmente. O criarEstiloGlobal 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, você importa o criarEstiloGlobal função e declarar os estilos que você precisa.

Por exemplo:

importar {createGlobalStyle} de'componentes de estilo';
const EstilosGlobais = criarEstiloGlobal`
 @importar url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


 * {
 margem: 0;
 preenchimento: 0;
 box-sizing: border-box;
 }


 corpo {
 cor de fundo: #343434;
 tamanho da fonte: 15px;
 cor: #FFFFFF;
 família de fontes: 'Montserrat', sem serifa; 
 }
`
exportarpadrão Estilos globais;

Então você importa o Estilos globais componente em seu componente de aplicativo e renderize-o. Renderizando o Estilos globais componente em seu componente de aplicativo aplicará os estilos ao seu aplicativo.

Igual a:

importar Reagir de'reagir';
importar Estilos globais de'./Global';
funçãoAplicativo() {
retornar (



 </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 é um grande framework com muito a aprender além disso.