3

💅 Vamos aprender styled-components do ZERO? Bora! - Parte I

#ReactJS #JavaScript #CSS
Aline Bastos
Aline Bastos

Adoro usar styled-components em um projeto React. A capacidade de escrever CSS diretamente no arquivo do componente é tão simples e direta, e o aumento de performance ao carregar apenas o código necessário para os componentes renderizados é excelente.


É uma ferramenta maravilhosa. Em muitos aspectos, mudou a forma como penso sobre a arquitetura CSS e me ajudou a manter minha base de código limpa e modular, assim como o React!



Mas o que é o styled-components?


Trata-se de uma biblioteca (lib) que nos permite escrever códigos CSS dentro do JavaScript. Dessa maneira não precisamos mais ficar importando nossos arquivos .css em nossas páginas, e se um dia precisarmos utilizar esse mesmo componente em outro projeto, uma das maneiras seria basicamente copiar o arquivo .js.


Com o styled-components também ganhamos de brinde compatibilidade de browsers.


Também ganhamos a regra de CSS Modules, o Styled cria um hash nas classes CSS, assim, cada componente conhece apenas o seu CSS, uma mudança em um componente será refletida somente nele.


Além de inúmeras outras vantagens, como a possibilidade de utilizar media queries de forma similar à que utilizamos com pré-processadores, sem contar que também é possível utilizar elementos aninhados, pseudo-elements, inclusive estilizar as tags html e body.



Bora codar!


Vamos criar um projeto React do zero somente para este tutorial, de quebra você já trabalha mais um pouco com componentes React.


Vamos usar o create-react-app, pois é bem simples de instalar, não precisa saber configurar webpack, e é criado um projeto em React bem simples e enxuto, pronto para o uso.


Para instalar nosso projeto vá até o seu terminal (pode ser o terminal do VScode) e digite:


npx install create-react-app tutorial-styled-components


Dica: Se você já instalou o create-react-app globalmente via npm install -g create-react-app, recomendamos que você desinstale o pacote usando `npm uninstall -g create-react-app` ou `yarn global remove create-react-app` para garantir que o npx sempre use a versão mais recente.


Ao terminar de instalar o projeto, entre no seu projeto e:


cd tutorial-styled-components
npm run start


E o aplicativo vai abrir na porta 3000:


Agora vamos para a parte divertida: styled-components!


Para instalar vá até o terminar e digite:


npm install --save styled-components

ou

npm i -S styled-components


Que é a mesma coisa, só com menos digitação, o que sempre pode ser útil.



Estilizando com styled-components!


Vamos manter esse layout que já veio com o create-react-app, mas mudar de puro CSS para styled-components?


Bora lá!


A primeira coisa que devemos fazer é eliminar o arquivo src/index.css.


Para isso, vamos criar um arquivo chamado GlobalStyles.js na pasta src para colocar os estilos globais do nosso projeto, então vamos copiar o conteúdo do index.css para lá, dessa forma:


// GlobalStyles.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
  }
`;

export default GlobalStyles;


Agora vamos abrir o arquivo src/index.js e fazer as seguintes alterações:


Vamos substituir a linha:


import './index.css';


Pela linha:


import GlobalStyle from './GlobalStyles';


E adicionar <GlobalStyles /> no topo da árvore do React.


Vai ficar assim seu arquivo:


import React from 'react';
import ReactDOM from 'react-dom';
import GlobalStyle from './GlobalStyles';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <GlobalStyle />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();


Pronto, agora podemos deletar o arquivo index.css da pasta src e ver que o layout no browser continua o mesmo :)


Agora nosso objetivo é remover o arquivo src/App.css que é chamado no arquivo src/App.js.


Vamos aos poucos, um pedacinho por fez.


Primeiro chamamos o styled-components no arquivo e mudamos a <div className=”App”></div>.


Como o nome da nossa função já é App, não podemos colocar o mesmo nome nessa variável, pois vai dar conflito, então podemos colocar um AppContainer, ou AppWrapper, já que engloba todo o nosso código.


Fica assim:


// App.js
import logo from './logo.svg';
import styled from 'styled-components';

const AppContainer = styled.div`
  text-align: center;
`;

function App() {
  return (
    <AppContainer>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </AppContainer>
  );
}

export default App;


Sempre colocamos depois do styled o que vamos estilizar, neste caso foi uma div, mas pode ser um header, um footer, uma section, um p, um a, ou o que a semântica exigir no momento.


Nesse caso a tag, que era assim:


<div className="App"></div>


Foi substituída por:


<AppContainer></AppContainer>


Agora podemos fazer o mesmo com os outros elementos do nosso src/App.css. Nem precisamos quebrar a cabeça para criar nomes para as nossas variáveis, é só tirar o hífen e utilizar o estilo CamelCase em cada uma: AppHeader, AppLogo e AppLink.


Fica assim:


// App.js
import logo from './logo.svg';
import styled from 'styled-components';

const AppContainer = styled.div`
  text-align: center;
`;

const AppHeader = styled.header`
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
`;

const AppLogo = styled.img`
  height: 40vmin;
  pointer-events: none;
  @media (prefers-reduced-motion: no-preference) {
    animation: App-logo-spin infinite 20s linear;
  }
`;

const AppLink = styled.a`
  color: #61dafb;
`;

function App() {
  return (
    <AppContainer>
      <AppHeader>
        <AppLogo src={logo} alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <AppLink
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </AppLink>
      </header>
    </AppContainer>
  );
}

export default App;


Perfeito!


Mas, pera aí, está faltando o @keyframe da animação! Como usamos a animação com styled-components?


Da documentação do styled-components:


As animações CSS com @keyframes não têm como escopo um único componente, mas você ainda não quer que elas sejam globais para evitar colisões de nomes. É por isso que exportamos um keyframes helper, que irá gerar uma instância única que você pode usar em todo o seu aplicativo.


Parece complicado tudo isso, mas vamos simplificar, basta fazer um simples import junto com o styled:


import styled, { keyframes } from 'styled-components';


O resultado fica assim:


// App.js
import logo from './logo.svg';
import styled from 'styled-components';

const AppContainer = styled.div`
  text-align: center;
`;

const AppHeader = styled.header`
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
`;

const AppLogoSpin = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const AppLogo = styled.img`
  height: 40vmin;
  pointer-events: none;

  @media (prefers-reduced-motion: no-preference) {
    animation: ${AppLogoSpin} infinite 20s linear;
  }
`;

const AppLink = styled.a`
  color: #61dafb;
`;

function App() {
  return (
    <AppContainer>
      <AppHeader>
        <AppLogo src={logo} alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <AppLink
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </AppLink>
      </header>
    </AppContainer>
  );
}

export default App;


Adicionamos o AppLogoSpin antes do AppLogo no arquivo, para o AppLogoSpin já existir quando a animação for chamada, e no media queries mudamos para ${AppLogoSpin}:


animation: ${AppLogoSpin} infinite 20s linear;


Agora é só conferir lá no browser para ver que está tudo funcionando como antes, mas agora trocamos todos os arquivos .css por styled-components.


Pronto, podemos deletar o arquivo src/App.css \o/



Conclusão:


Até aqui aprendemos a trocar o css puro por styled-components em um projeto sem mudar o layout nem mexer nos estilos. Isso é de grande ajuda quando você precisa fazer esse tipo de mudança em um projeto já existente, e você viu que não é um bicho de sete cabeças, né? É só fazer aos poucos :)


No próximo artigo vamos aprofundar um pouco mais o nosso conhecimento sobre styled-components, não percam!

3
333

Comentários (3)

0
A

Adriano Silva

16/03/2021 00:25

Aguardando a continuação. Parabens.

1
Lucas Jesus

Lucas Jesus

16/02/2021 12:55

Boa introdução ao Styled Components.


Tks

1
Northon Tome

Northon Tome

15/02/2021 23:54

Styled component e muito bom de se usar, obrigado pelo conteúdo, ajudará bastante

Front-End Software Engineer

Brasil