Organizando props do React.js no styled-components
Qual o problema enfrentado?
Se você utiliza o styled-components em seus projetos React, provavelmente já se deparou com situações em que o estilo de um determinado componente muda dependendo de uma prop recebida, correto? Afinal, essa é uma das principais vantagens obtidas ao utilizar essa biblioteca tão falada atualmente.
Por exemplo, vamos desenvolver um botão que possui dois estilos: primário e secundário.
Nesse caso é simples, dependendo da prop “type” que o componente receber, ele altera seu background e color. Mãos a obra!
Tranquilo, correto? O operador ternário ajuda muito nesse tipo de caso. Agora, vamos supor que o seu cliente deseje adicionar mais dois estilos: um com temática relacionada à Black Friday e outro com temática de Natal.
E chegamos ao problema! Como resolveremos essa situação? O primeiro pensamento pode ser criar condições simples (utilizando “ifs”). Vamos experimentar:
É uma solução possível, mas concorda comigo que (além de machucar um pouco os olhos), acaba se tornando algo bem complexo? Além de que, se o cliente pedir outros estilos, ou solicitar a alteração de outras propriedades do componente, uma bola de neve vai se formando, e dependendo da proporção, pode até mesmo prejudicar a performance da aplicação.
Certo, mas qual outro caminho podemos seguir?
Vamos pensar nas variações de estilo como constantes, e coloca-las dentro de um “enum”. Nesse sentido, podemos buscar essa propriedade através de uma chave, que será a nossa prop “type”. Pronto, resolvemos a questão da complexidade do código, mas ainda temos um problema: da mesma forma que a solução anterior, precisaríamos criar uma situação diferente para cada propriedade a ser alterada, nesse caso, precisaríamos de dois “enums”.
Para resolver esse problema, podemos utilizar a função “css” do styled-components , que permite retornar um bloco de propriedades css para o componente styled. Interessante. Porém, como utilizar essa ferramenta em nossa solução? E se em vez de retornarmos apenas o valor de determinada propriedade, de forma individual, nós retornássemos todo o css que compõe determinado estilo? Mãos à obra!
Interessante, não acha? Perceba que com essa solução, não estamos mais realizando diversas validações em cada propriedade, para saber qual estilo o componente precisa. Estamos apenas consumindo um “enum”, por meio de uma chave recebida como prop pelo botão.
Finalizando
Vale ressaltar que não existe apenas uma solução para este problema, muito menos uma bala de prata que irá resolver todos os casos. Contudo, procurei demonstrar uma das possíveis formas de organizar as props do React.js no styled-components, e vale de cada desenvolvedor analisar e decidir qual a melhor solução no projeto que atua.
