À medida que os recursos e ferramentas de desenvolvimento da web evoluem, o estilo da estrutura de desenvolvimento da web reflete essa evolução. Mudar de estilos embutidos para soluções CSS-in-JS tornou a experiência de desenvolvimento mais consistente.

Com a biblioteca de styled-components , os desenvolvedores podem utilizar CSS em JavaScript ou frameworks JavaScript em vez de criar arquivos CSS separados tradicionais ao estilizar. Ele obteve um grande sucesso no React e agora está disponível para projetos Vue.

Nesta postagem, veremos por que utilizar componentes estilizados é vantajoso ao estilizar no Vue.

Vantagens dos componentes estilizados no Vue.js

Construa seus próprios componentes

Os componentes estilizados oferecem a liberdade de criar seus próprios componentes estilizados em Vue . Você pode definir o estilo das tags HTML e dar a elas o nome de sua escolha para tornar seu código mais legível.

Política sem aulas

Com componentes estilizados, tudo é feito com a ajuda de adereços. Você pode alterar dinamicamente o estilo de seus componentes sem usar classes. Dá a você o poder de usar os operadores ternários dentro dos literais de string dos componentes estilizados.

Projeto simultâneo

Os componentes estilizados tornam o estilo e o design de seus componentes simultâneos e semelhantes em todo o aplicativo sem muito esforço. Os recursos de temas fornecem um local central para definir os elementos básicos de design, como como cor, tamanho e espaçamento, e pode ser facilmente integrado a todos os componentes do aplicativo.

Uma enorme comunidade

Vendo um enorme crescimento , a comunidade de componentes estilizados fornece ajuda para qualquer problema e tem uma biblioteca popular para desenvolvedores .

Agora que vimos os benefícios dos componentes estilizados, é hora de instalar a biblioteca em nosso projeto Vue e ver como podemos usar seus diferentes recursos.

Instalação de componentes estilizados em Vue.js

Antes de instalar a biblioteca, tenha um projeto Vue instalado e funcionando em sua máquina local. Com um projeto configurado, instale a biblioteca com o seguinte comando:

 npm i vue-style-components

Se você usou o Vue CLI para configurar o projeto, a estrutura da pasta será semelhante a esta:

Com todos os estilos removidos de nosso aplicativo Vue, HelloWorld.vue se parece com o seguinte:

//HelloWorld.vue  
 
 {{msg}} 
 
 

Vamos executar o projeto para ver a seguinte saída no navegador:

Como podemos ver, há uma tag de cabeçalho h1 simples sem estilos aplicados. Vamos estilizar este h1 com componentes estilizados e devemos criar uma nova pasta no diretório src para armazená-los. Nessa pasta, crie um arquivo Header.js . A estrutura do projeto será a seguinte:

Em seguida, adicione as seguintes linhas de código em Header.js :

 importar estilizado de"componentes com estilo vue"; export const StyledHeader=styled.h1` tamanho da fonte: 1,5em; alinhamento de texto: centro; cor vermelha; cor de fundo: cinza;
`;

Finalmente, podemos registrar StyledHeader em HelloWorld.vue e usá-lo em vez de h1 :

Agora, vamos iniciar o servidor e ver como a tag de cabeçalho simples e enfadonha muda:

Como podemos ver, os estilos necessários foram aplicados sem o uso de CSS!

Passando os adereços em componentes estilizados

Componentes estilizados, como quaisquer outros componentes, têm a capacidade de aceitar acessórios. Por exemplo, podemos criar um campo de entrada e passar um prop para ele. Aqui, criaremos um novo componente chamado Input.js na pasta components e adicionaremos o seguinte código a ele:

 importar estilizado de"componentes com estilo vue"; export const StyledInput=styled.input` tamanho da fonte: 1,25em; preenchimento: 0,5em; margem: 0,5em; cor: blueviolet; fronteira: nenhum; cor de fundo: lavanda; raio da borda: 3px; &:flutuar { sombra da caixa: inserção 1px 1px 2px rgba (0, 0, 0, 0,1); }
`;

A próxima etapa é usá-lo em HelloWorld.vue :

Salvar as alterações irá refleti-las no navegador, confirmando que nossa entrada foi processada:

Mas isso parece estranho sem uma entrada adequada. Vamos passá-lo como um suporte para StyledInput junto com o tipo:

  ...

Executá-lo nos dá a seguinte saída:

Estilo dinâmico com adereços em Vue.js

Esta é uma das características mais fortes dos componentes estilizados. Ele permite que os desenvolvedores definam estilos dinâmicos sem usar toneladas de classes.

Como os componentes estilizados podem pegar adereços e aplicar estilo com base em adereços, vamos dar adereços personalizados para StyledHeader .

Vamos modificar nosso arquivo Header.js da seguinte maneira:

 importar estilizado de"componentes com estilo vue";
const hdrProps={principal: Boolean}; export const StyledHeader=styled ("h1", hdrProps) ` tamanho da fonte: 1,5em; alinhamento de texto: início; cor: $ {(props)=> (props.primary?"white":"red")}; cor de fundo: $ {(props)=> (props.primary?"green":"yellow")};
`;

Aqui, definimos os adereços para nosso StyledHeader . A função estilizada leva o elemento HTML com os adereços como um argumento, após o qual podemos especificar o comportamento de nosso CSS com base no valor desse prop.

Vamos executar o projeto sem dar qualquer suporte ao nosso cabeçalho criado anteriormente e ver a seguinte saída no navegador:

Isso está funcionando exatamente como especificamos. Agora, vamos fornecer uma proposta primária para nosso StyledHeader e verificar se os estilos são aplicados corretamente:

Como podemos ver, o StyledHeader está aceitando primário como prop. Depois de salvar as alterações, nosso projeto renderiza a seguinte saída:

Com isso, mudamos com sucesso o estilo com base em nossos adereços, dando-nos o conceito básico por trás da abordagem. Estilos com adereços podem ser alterados com eventos de botão, envios de formulários e muito mais. Agora podemos aproveitar todo o poder do estilo dinâmico com componentes estilizados.

Aplicando o mesmo estilo a vários componentes

Os componentes estilizados também permitem que os componentes sigam o mesmo estilo. Isso cria um estilo consistente para os aplicativos e remove muitos códigos repetitivos.

Simplesmente adicionando a seguinte linha de código em Header.js , podemos aplicar o seguinte para usar os mesmos estilos para h2 :

 export const StyledHeader2
=StyledHeader.withComponent ("h2");

Depois de usar este componente no arquivo HelloWorld.vue , obteremos a seguinte saída:

Alterando dinamicamente o tipo de componente renderizado

Às vezes, os componentes devem ser alterados com base em um cenário específico, mas mantêm os mesmos estilos. Neste caso, os componentes estilizados podem usar um prop para alterar o componente que está sendo renderizado.

Se aplicarmos o as prop para alterar o StyledHeader , podemos alterá-lo para um botão:

O navegador nos fornece a seguinte saída:

Inspecionando a função , podemos ver claramente que é um botão:

Estendendo estilos

Se for necessário fazer alterações no estilo do componente sem reescrevê-lo, podemos substituir ou adicionar novos estilos a ele.

Ao criar um novo componente denominado NewHeader.js , podemos substituir o atributo color do Header.js criado anteriormente.

Então, vamos adicionar o seguinte código no NewHeader.js :

 importar {StyledHeader} de"./Header";
export const NewHeader=StyledHeader.extend` cor roxa; cor da borda: roxo;
`;

Vamos agora renderizar e usar em nosso arquivo HelloWorld.vue :

Depois de salvar as alterações, obtemos o seguinte resultado:

Como podemos ver, substituímos a cor de Header.js e usamos seu estilo em nosso recém-criado NewHeader.js .

Conclusão

Os componentes estilizados são uma biblioteca poderosa que resolve a maioria dos pontos problemáticos que encontraríamos usando CSS simples. Embora a curva de aprendizado possa ser íngreme inicialmente, os benefícios valem a pena.

A postagem Theming Vue.js com componentes estilizados apareceu primeiro no LogRocket Blog .