Estilizando componentes filhos com styled components
No meio do desenvolvimento já me peguei várias vezes me perguntando como estilizaria um componente filho, e a dúvida maior era se eu criava um outro componente ou se utilizaria um único para situações distintas. Então resolvi unir o útil com o agradável, pois estava querendo começar a publicar artigos simples aqui no medium.
Esse é meu primeiro artigo. Hello World!
Então resolvi criar uma tabela simples para explicar como vamos estilizar os filhos de um componente pelo pai.
Para nós modificarmos os elementos filhos de um componente pai é necessário utilizar dentro do CSS do styled-components da seguinte forma:
option ${ ChildrenName }
ChildrenName: É o nome do componente filho.
Option: Como o próprio nome diz, é opcional, podendo ser eventos do CSS como um hover, ficando da seguinte forma:
&:hover ${ ChildrenName }
Observação: Aqui a ordem dos fatores alteram o produto!
Então trate de sempre deixar os componentes filhos antes dos componentes que podem ser pai.
Agora vamos ao exemplo:
Acima vemos o código de nossa pequena tabela, e esse é o resultado:
Os componentes <Header> e <Body> possuem comportamentos diferentes em relação aos seus filhos.
Percebemos que o cabeçalho da tabela possui uma cor de fundo, sua fonte um pouco maior e seu título em negrito, e os itens das linhas da tabela apenas com o tamanho de fonte menor referente ao cabeçalho.
Arquivo style.js
Linha 29 > ${Line} — Como no CSS o sinal de maior representa filho-direto do elemento, o option também funciona para este caso. O componente <Line> é filho-direto do <Header>, então aplicando o sinal de maior > podemos ver os resultados do código CSS implementado.
Linha 33 ${Column} — Estamos utilizando a maneira simples de indicar que o componente é um filho e que o CSS implementando, vai resultar em algo apenas se houver o componente ${Column} dentro do <Header>.
Linha 42 ${Column} — Estamos utilizando a maneira simples de indicar que o componente é um filho e que o CSS implementando, vai resultar em algo apenas se houver o componente ${Column} dentro do <Body>.
Isso é tudo pessoal, muito obrigado!!!!
Se possível, deixe um feedback por gentileza.
Contatos:
- Linkedin: Maik Vinícius
- Github: @maikvinicius
- Instagram: @maikviniciusdev
