Adaptando estilizações usando props no styled-components

  Entrando na página de produtos construída anteriormente: https://programacao-descomplicada.blogspot.com/2022/12/userouter-e-dados-na-url-do-navegador.html, para construir o botão de adicionar o produto ao carrinho, me deparei com um problema que decidi resolver antes de seguir para alguma implementação nova no projeto.

  Olhando a página inicial dá para perceber que existem botões com estilizações iguais, mas eles não foram tratados como sendo um componente, foram feitos dentro de cada componente fazendo com que existam código de estilização duplicado. Imagine o problema se esse projeto crescer muito? Quanto tempo eu irei gastar mudando a estilização dos botões tendo que encontrar cada um em vários locais diferentes do código?

  Primeiro eu criei uma pasta dentro dos componentes chamada de Button, dentro dela eu coloquei um arquivo index.js. A ideia é que as estilizações estejam no mesmo lugar, daí não vou fazer uma função de exportação e sim exportar o estyled-components que irei colocar aqui.

export const StyledButton = styled.button` `;

Após isso eu pensei em outra forma de estilizar com styled-components que não duplica-se código, daí encontrei na documentação: https://styled-components.com/docs/basics, o que é chamado de adaptação baseada em props e a extensão de estilo, que podem ser úteis nesse caso.

  Primeiro eu fui até o Banner e retirei a estilização do botão de lá e importei a constante para lá para verificar se continua do mesmo jeito ou se eu quebrei alguma coisa no site. Tudo certo até agora, partiu pegar a estilização do botão de login no Header agora. 

  O padding, border e transition são iguais nos dois botões, pegando apenas as igualdades, eu montei uma constante para elas e usei a extensão de estilos para levar os estilos para o botão do banner. 

const CommonStyling = styled.button`

 padding: 0.5rem 1rem;

 border: 2px solid var(--cor-1);

 transition: all 300ms ease-out;


`;


export const StyledButton = styled(CommonStyling)` … `;

  Agora, olhando as diferenças entre os dois botões: um tem width e outro tem margin, para resolver essas diferenças e as demais eu vou utilizar a adaptação baseada em props, onde se o botão apresentar uma prop chamada secundary ele terá as características do botão de login, se não ele fica com o estilo do botão do banner.

const CommonStyling = styled.button`

 padding: 0.5rem 1rem;

 border: 2px solid var(--cor-1);

 transition: all 300ms ease-out;


`;


export const StyledButton = styled(CommonStyling)`

 background: ${props => props.secondary ? "transparent" : "var(--cor-1)"} ;

 color: ${props => props.secondary ? "var(--cor-1)" : "#fff"};

 width: ${props => props.secondary ? "none" : "10rem"};

 margin: ${props => props.secondary ? "0.5rem" : "0"};


 &:hover {

background: ${props => props.secondary ? "var(--cor-1)" : "var(--cor-2)"};

border-color: ${props => props.secondary ? "var(--cor-1)" : "var(--cor-2)"};

color: #fff;

 }

`;

  No botão de login no componente de Header importamos a estilização do componente Button e passamos junto com o nome secondary e pronto, temos o site igual como era antes só que com a estilização dos botões em um único lugar. Vamos fazer o mesmo com o botão de envio de e-mail no Footer que é igual ao de login no estilo. 

<StyledButton secondary href=”#">Login</StyledButton>

  Eu vou ficando por aqui, mas ainda falta colocar os códigos de theme para o melhor funcionamento dos botões no DarkMode. Deixo um abraço e até o próximo artigo, lembrando que o código está no meu github. 

Blog: https://programacao-descomplicada.blogspot.com/2022/12/adaptando-estilizacoes-usando-props-no.html