Utilizando Media Queries no React com Styled Components

Oi, gente! Todo mundo bem? Se cuidando? Se sim, hoje vou falar um pouco sobre Medias-Querys, utilizadas pelos devs como: “pra não quebrar no mobile”. Por exemplo, um site na web que quando aberto num celular, o conteúdo do site não fique disperso, mas adapatável.

Configurando ambiente:

Criei meu projetinho react, usando create-react-app, nada novo sob o sol, e tenho essa estrutura aqui:

Dependências instaladas são:

• Styled-Components: yarn add styled-components or npm i …
• React-Router-Dom (Opcional): yarn add react-router-dom

Dentro da minha pasta pages tenho somente uma div vazia.

Estilos Globais

Bom, ces podem ver que tem uma pastinha ali chamada styles, nela criei meu arquivo de estilos globais, o que é comum, pra tirar algumas estilizações automáticas dos navegadores, saca o código aqui:

Criando o Header e aplicando as Querys

Bom, dentro de src crie uma pasta chamada de components e nela crie seu arquivo header.js e um de styles.js, ficando assim:

Partindo para o código do Header

Show, agora vamos codar o nosso header.js! Que vai ser bem simples, o código é esse aqui ò:

Bem, muito simples. Como eu não tenho um logo, utilizei um site bem legal pra gerar uns avatars pra gente, o api.adorable.io, então ele vai ser nosso logo e temos apenas um botão.

Agora vamos fazer uma coisinha antes, lá no App.js do nosso projeto, vamos importar o header, pra conseguirmos ver como está ficando nosso componente. Como estou utilizando o router-dom vou importar lá, junto com minhas rotas, mas se você quiser pode importar como um componente, simplesmente, vai funcionar do mesmo jeito. No meu caso fica assim:

Legal!! Uma vez que importado o header, teremos o seguinte visual:

Show, vambora para os nossos estilos.

Então, vamos começar por algumas regras básicas, o código inicial vai ficar assim:

Não vou entrar tanto em detalhes sobre estilização, mas são coisas notórias.

Setamos um position sticky, o que quer dizer que o Header acompanhará a rolagem, ou seja, não ira sucumbir quando o usuário utilizar o scroll, mas é opcional, pode ser usar relative de boas.

Qualquer dúvida sobre os estilos podem ser consultadas na documentação do flexbox, que é super de boas, gente. Vamos continuar aqui.

Utilizando as querys para adapatar nosso header

Bom, se a gente salvar nosso arquivo e visulizar ele no chrome, vamos ver o seguite:

Terrível, né? Utilizando o console e adaptando a visualização como mobile, podemos ver que a coisa não tá boa. Agora entra as Medias Querys no pagode.

Consultas de mídia é um módulo CSS3 que permite que a renderização de conteúdo se adapte a condições como resolução de tela. Tornou-se um padrão recomendado pelo W3C em junho de 2012 e é uma tecnologia fundamental do design responsivo da web.

Bom, tendo isso em mente vamos aplicar ela no nosso código e entender seu funcionamento na prática.

LET`S CODE

Como escrevemos no nosso código que o máximo que nosso container pode ir é de 1168px, temos que lembrar disso nas nossas querys, claro, há casos e casos, mas vamos nos segurar nesse.

A utilização das querys se dá pela chamada…

Bom, passamos um max-width diferente aqui, de 800 px! O que quer dizer que quando nosso container atingir esses 800px ele vai mudar, lembra que nosso position estava sticky? Agora vamos deixar relative e dar um flex-direction column, simplesmente para colocar um component de baixo do outro. Salvando isso teremos esse novo resultado aqui ó:

Ficou melhor, né? Então, viram que é super tranquilo utilizar as querys? Não tem muito mistério! Mas vimos que o botão tá grudado no nosso logo, a solução? Uma query para nosso botão, todas alterações que fizemos vai ficar assim:

Como resultado teremos isso:

Simples, né? Podemos ir um pouco mais além, vou dar mais um exemplo do que podemos fazer. Digamos que quando nosso container atingir o máximo que colocamos, quero que meu botão mude o background dele para preto, podemos simplesmente adicionar isso na query que criamos para o nosso botão.

E nosso resultado final vai ser:

E aí, curtiram? Espero que tenha sido de alguma valia pra vocês, as querys não são nada complicadas de se usar, é bom criar vários exemplos e ir testando as possibilidades. Tente utilizar em textos, nos h1, h2, p e assim por diante. O esquema é sempre o mesmo!

Era isso, gente! Um abraço e fiquem em casa.