image

Access unlimited bootcamps and 650+ courses forever

60
%OFF
Article image
Aline Bastos
Aline Bastos15/02/2021 21:29
Share

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

  • #React
  • #JavaScript
  • #CSS

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:

image

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!

Share
Comments (3)

AS

Adriano Silva - 16/03/2021 00:25

Aguardando a continuação. Parabens.

Lucas Jesus
Lucas Jesus - 16/02/2021 12:55

Boa introdução ao Styled Components.


Tks

Northon Tome
Northon Tome - 15/02/2021 23:54

Styled component e muito bom de se usar, obrigado pelo conteĂșdo, ajudarĂĄ bastante