A biblioteca React Styled Components

Muito tem-se falado sobre a maneira mais apropriada de se estilizar apps web. Pode-se optar pelo método tradicional que consiste em criar um arquivo de folha de estilos tipo estilos.css e lincar tal arquivo ao documento HTML a ser estilizado ou usar um método mais recente que consiste na estilização com uso de JavaScript, popularmente conhecido como CSS-in-JS.

O método de estilização CSS-in-JS aplica estilos CSS em componentes individualmente em lugar de aplicá-los no documento HTML como um todo. Isso significa que a estilização CSS se aplica exclusivamente no escopo do componente e não no documento globalmente. Algumas das vantagens do uso de CSS-in-JS são:

Reduz a quantidade de requisições HTTP: Com uso de CSS-in-JS não há necessidade de se fazer requisições HTTP para carregar assets e recursos.
Possibilidade de se criar estilização fragmentada: Usar CSS-in-JS possibilita a que se crie estilos livremente sem necessidade de se preocupar com problemas de compatibilidade.

Um exemplo de uso de CSS-in-JS é mostrado na Home Page do site de Styled Components. A biblioteca Styled Components permite que você escreva CSS simples para seus componentes sem se preocupar com colisões dos nomes de classes. Ajuda a escrever CSS com escopo definido para um único componente e não se aplica em nenhum outro elemento da página.

Por que usar Styled Components?

Styled Components permitem a escrita de CSS em JavaScript usando Tagged Templates Literals ( dica do Maujor: Tutorial sobre Tagged Template Literals ). Isso remove a necessidade de mapeamento entre o componente e seus estilos, uma vez que o próprio componente é transformado em uma construção de estilo de baixo nível. Styled Components foi criado pelos seguintes motivos:

Automatização de CSS crítico: Styled Components controlam automaticamente quais componentes e seus respectivos estilos serão renderizados em uma página. Isso e mais a marcação da página reduz ao mínimo a quantidade de código a ser carregado, enriquecendo a experiência do usuário.
Eliminação de bugs devido a colisão de nomes de classes: Styled Components geram nomes de classe exclusivos para seus estilos. Você não precisa se preocupar com duplicação, sobreposição ou erros de ortografia.
Segurança na exclusão de CSS: pode ser difícil saber se um nome de classe é usado em algum lugar na sua base de código. Componentes estilizados tornam isso óbvio, pois cada estilo está ligado a um componente específico. Se o componente não for utilizado ou for excluído, toda sua estilização será excluída.
Simplificação da estilização dinâmica: adaptar o estilo de um componente com base em props ou em um tema global é uma tarefa simples, intuitiva e não requer gerenciamento manual de dezenas de classes.
Facilidade de manutenção: você nunca precisará procurar em diferentes arquivos para encontrar o estilo que se aplica ao seu componente; portanto, a manutenção é muito fácil, não importa o tamanho da sua base de código.
Prefixação do vendedor é automática: escreva seu CSS no padrão atual e deixe que a biblioteca Styled Components lide com o resto.

Mãos à obra com Styled Components

A instalação da biblioteca Styled Components pode ser feita com uso de NPM conforme a linha de comando mostrada a seguir:

CLI

$ npm install styled

Para estilizar componentes a biblioteca Styled Components utiliza tagged template literals, dispensando assim o mapeamento entre componentes e estilos. Isso significa que, a definição de estilos é efetivamente anexada ao componente React normal.

Tendo instalado a biblioteca Styled Component vamos criar nosso primeiro componente estilizado. Criaremos um componente Button estilizado e reutilizável.

JavaScript


import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  border-radius: 3px;
  color: palevioletred;
  border: 2px solid palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  transition: 0.5s all ease-out;
  &:hover {
    background-color: palevioletred;
    color: white;
  }
`;
function App() {
  return (
    <div>
      <h1>Alô CodeSandbox</h1>
      <h2>Edite para ver a mágica acontecer!</h2>
      <Button>Eu sou um botão</Button>
    </div>
  );
}
export default App;

No bloco de código mostrado, a variável Button é um componente React que pode ser usado em um componente funcional. A variável é atribuída à styled.button cuja sintaxe em acordo com a sintaxe de Templates Literals possibilita a que se escreva CSS atual.

Notar que a biblioteca Styled Components permite que você escreva CSS com a mesma sintaxe que escreveria um arquivo de folha de estilos do tipo estilos.css, admitindo inclusive pseudo-seletores como :hover conforme mostrado.

Aplicativos React fazem uso massivo do objeto state() e também a biblioteca Styled Components permite definir dinamicamente propriedades CSS usando props. Você pode passar uma função para suas declarações de estilo, com um parâmetro de valor prop declarado no componente. Em seguida, você pode usar props para ajustar seu estilo, como mostrado no componente Button do exemplo a seguir:

JavaScript


import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  border-radius: 3px;
  color: ${props => (props.primary ? 'violet' : 'palevioletred')};
  border: ${props =>
    props.primary ? '2px solid violet' : '2px solid palevioletred'};
  margin: 0 1em;
  padding: 0.25em 1em;
  transition: 0.5s all ease-out;
  &:hover {
    color: white;
    background-color: ${props =>
      props.primary ? 'violet' : 'palevioletred'};
  }
`;
function App() {
  return (
    <div>
      <h1>Alô CodeSandbox</h1>
      <h2>Edite para ver a mágica acontecer!</h2>
      <Button>Eu sou um botão</Button>
      <Button primary>Eu sou um botão primário</Button>
    </div>
  );
}
export default App;

No exemplo mostrado o componente Button altera as propriedades color, border e background-color de acordo com o valor props passado, nesse caso, o prop primary. Usamos uma arrow function que faz a verificação se o objeto primary está presente com uso do operador ternário. O resultado da condicional define o estilo a aplicar.

Para entender melhor a biblioteca Styled Components, vamos usá-la para criar um aplicativo que consiste em um clone do popular aplicativo de compartilhamento de imagens, o Instagram.

Criando um clone do Instagram com Styled Components

O objetivo é criar um clone do Instagram conforme imagem mostrada a seguir:

Para começar, precisamos criar um aplicativo React e isso pode ser feito facilmente usando o pacote CLI create-react-app O pacote CLI create-react-app permite criar aplicativos React facilmente, sem configuração de compilação. A CLI pode ser usada como visto a seguir. Este comando cria um aplicativo React em uma pasta chamada stylagram:

JavaScript


npx create-react-app stylagram

Par construir nosso aplicativo criaremos oa seguintes componentes:

Componente Header
Componente Profile
Componente Image

Primeiro criaremos os componentes individualmente e depois reuniremos tudo no final.

Componente Header

Na pasta src/components/ crie um arquivo intitulado Header.js e nele insira o código mostrado a seguir:

JavaScript


// Header.js
import React from 'react';
import styled from 'styled-components';
import { ReactComponent as Explore } from '../explore.svg';
import { ReactComponent as Avatar } from '../avatar.svg';
import { ReactComponent as Compass } from '../compass.svg';
const Nav = styled.div`
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.0975);
`;
const NavHeader = styled.div`
  max-width: 1010px;
  padding: 26px 20px;
  width: 100%;
  display: flex;
  align-items: center;
  margin: 0 auto;
`;
const NavLeft = styled.div`
  width: 33.333%;
  text-align: left;
`;
const NavCenter = styled.div`
  width: 33.333%;
  text-align: center;
`;
const Input = styled.input`
  font-size: 16px;
  border: solid 1px #dbdbdb;
  border-radius: 3px;
  color: #262626;
  padding: 7px 33px;
  border-radius: 3px;
  color: #999;
  cursor: text;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  background: #fafafa;
  &:active,
  &:focus {
    text-align: left;
  }
`;
const NavRight = styled.div`
  width: 33.333%;
  text-align: right;
  svg {
    margin-right: 20px;
  }
`;
const MenuLink = styled.a``;
function Header() {
  return (
    <Nav>
      <NavHeader>
        <NavLeft>Stylagram</NavLeft>
        <NavCenter>
          <Input type="text" placeholder="Search" />
        </NavCenter>
        <NavRight>
          <MenuLink href="#">
            <Compass />
          </MenuLink>
          <MenuLink href="#">
            <Explore />
          </MenuLink>
          <MenuLink href="#">
            <Avatar />
          </MenuLink>
        </NavRight>
      </NavHeader>
    </Nav>
  );
}
export default Header;

O componente Header é uma barra de navegação dividida em três seções; o logotipo à esquerda, a barra de pesquisa no meio e os ícones à direita.

Conforme mostrado no bloco de código anterior, vários componentes foram criados e estilizados com Styled Components e usados para compor a barra de navegação. Também é interessante observar que Styled Components também oferece suporte ao aninhamento de CSS, como visto no componente Input.

JavaScript


const Input = styled.input`
  font-size: 16px;
  border: solid 1px #dbdbdb;
  border-radius: 3px;
  color: #262626;
  padding: 7px 33px;
  border-radius: 3px;
  color: #999;
  cursor: text;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  background: #fafafa;
  &:active,
  &:focus {
    text-align: left;
  }
`

Notar no bloco de código acima, que o uso de pseudo-seletores e os pseudo-elementos são perfeitamente válidos em Styled Components e praticamente tudo o que pode ser feito no CSS tradicional pode ser feito no Styled Components.

Componente Profile

Na pasta src/components/ crie um arquivo intitulado Profile.js e nele insira o código mostrado a seguir:

JavaScript


// Profile.js
import React from 'react';
import styled from 'styled-components';
import SingleImage from './Image.js';
const feedsource = [
  {
    source:
      'https://scontent-lhr3-1.cdninstagram.com/vp/ea6621cf5f948bd2eaf5bebfcfcde5d1/5D1B1250/t51.2885-15/e35/c0.135.1080.1080/s480x480/31819148_387652391751516_4869384593058299904_n.jpg?_nc_ht=scontent-lhr3-1.cdninstagram.com',
    likes: '43',
    comments: '3',
    isVideo: false,
    id: 0,
  },
  {
    source:
      'https://scontent-lhr3-1.cdninstagram.com/vp/f14456c901b071f5367c4a6032ec48b6/5C900EF8/t51.2885-15/e15/s320x320/14240675_192169101203223_495226036_n.jpg?_nc_ht=scontent-lhr3-1.cdninstagram.com',
    likes: '313',
    comments: '10',
    isVideo: true,
    id: 1,
  },
  {
    source:
      'https://scontent-lhr3-1.cdninstagram.com/vp/9e4e0f7667fe733406f88b9f86bdf84a/5D19E7B2/t51.2885-15/e35/s480x480/14262723_1219537941422458_2127857940_n.jpg?_nc_ht=scontent-lhr3-1.cdninstagram.com',
    likes: '29',
    comments: '2',
    isVideo: false,
    id: 2,
  },
  {
    source:
      'https://scontent-lhr3-1.cdninstagram.com/vp/3c9520014265a02a446841b20c529066/5D188BE1/t51.2885-15/e35/c135.0.810.810/s240x240/14294939_1218250054909378_1762757626_n.jpg?_nc_ht=scontent-lhr3-1.cdninstagram.com',
    likes: '18',
    comments: '2',
    isVideo: false,
    id: 3,
  },
  {
    source:
      'https://scontent-lhr3-1.cdninstagram.com/vp/34afcdf7b06fc1f4a6b1a0e7985ebe1a/5D24FDF9/t51.2885-15/e35/c135.0.810.810/s480x480/14240669_1005823466206583_2103344102_n.jpg?_nc_ht=scontent-lhr3-1.cdninstagram.com',
    likes: '30',
    comments: '4',
    isVideo: false,
    id: 4,
  },
];
const ProfileContainer = styled.div`
  max-width: 1010px;
  width: 100%;
  margin: 20px auto;
`;
const ProfileDetails = styled.div`
  display: flex;
`;
const ProfileDetailsLeft = styled.div`
  margin-right: 40px;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
`;
const ProfileDetailsRight = styled.div`
  display: flex;
  align-items: end;
  justify-content: center;
  flex-direction: column;
`;
const ProfileImage = styled.img`
  border-radius: 50%;
  width: 150px;
  border: 1px solid #ccc;
  padding: 5px;
`;
const ProfileDetailsUsername = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
`;
const EditProfileButton = styled.div`
  background-color: transparent;
  border: 1px solid #dbdbdb;
  color: #262626;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  padding: 5px 9px;
  text-transform: capitalize;
  font-size: 14px;
  margin-left: 20px;
`;
const HeadingThreeText = styled.h3``;
const ParagraphText = styled.p`
  margin-right: 25px;
`;
const ProfileDetailsMeta = styled.div`
  display: flex;
  justify-content: center;
`;
const ProfileDetailsName = styled.div`
  text-align: left;
`;
const ImagesWrapper = styled.div`
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
`;
function Profile() {
  return (
    <ProfileContainer>
      <ProfileDetails>
        <ProfileDetailsLeft>
          <ProfileImage src="https://api.adorable.io/avatars/285/abott@adorable.png" />
        </ProfileDetailsLeft>
        <ProfileDetailsRight>
          <ProfileDetailsUsername>
            <HeadingThreeText>yomieluwande</HeadingThreeText>
            <EditProfileButton>Edit profile</EditProfileButton>
          </ProfileDetailsUsername>
          <ProfileDetailsMeta>
            <ParagraphText>
              <strong>5</strong> posts
            </ParagraphText>
            <ParagraphText>
              <strong>296</strong> followers
            </ParagraphText>
            <ParagraphText>
              <strong>269</strong> following
            </ParagraphText>
          </ProfileDetailsMeta>
          <ProfileDetailsName>
            <ParagraphText>
              <strong>Yomi</strong>
            </ParagraphText>
          </ProfileDetailsName>
        </ProfileDetailsRight>
      </ProfileDetails>
      <ImagesWrapper>
        {feedsource.map(item => (
          <SingleImage image={item} key={item.id} />
        ))}
      </ImagesWrapper>
    </ProfileContainer>
  );
}
export default Profile;

No bloco de código acima, tal como fizemos para o componente Header, criamos vários componentes estilizados que foram usados para criar o componente Profile. A variável styled contém várias funções que representam todos os elementos HTML conhecidos. Isso nos permite estilizar tags de cabeçalho, tags img etc., como visto no bloco de código acima.

Além disso, foi criado um array de objetos denominado feedSource contendo dados que serão usados para exibir imagens de feed exatamente como o Instagram. Os links de origem estão realmente vinculados às minhas imagens pessoais no Instagram.

Usamos o componente SingleImage para exibir as imagens contidas no array feedSource. A matriz é iterada usando a função map() e, em seguida, os dados são passados para o componente SingleImage com uso de props.

Componente Image

Na pasta src/components/ crie um arquivo intitulado Image.js e nele insira o código mostrado a seguir:

JavaScript


// Image.js
import React from 'react';
import styled from 'styled-components';
import { ReactComponent as Comment } from '../comment.svg';
import { ReactComponent as Play } from '../play.svg';
import { ReactComponent as Heart } from '../heart.svg';
const ImgContainer = styled.div`
  position: relative;
  flex-basis: 100%;
  flex-basis: calc(33.333% - 20px);
  margin: 10px;
  cursor: pointer;
  transition: 0.5s all ease-in;
`;
const ImgIcons = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-right: 20px;
  svg {
    margin-right: 10px;
  }
`;
const ImgMeta = styled.div`
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  ${ImgContainer}:hover & {
    display: flex !important;
  }
`;
const Img = styled.img`
  cursor: pointer;
  width: 100%;
`;
function Image({ image }) {
  return (
    <ImgContainer>
      <Img src={image.source} />
      <ImgMeta>
        <ImgIcons>
          {image.isVideo ? <Play /> : <Heart />} {image.likes}
        </ImgIcons>
        <ImgIcons>
          <Comment /> {image.comments}
        </ImgIcons>
      </ImgMeta>
    </ImgContainer>
  );
}
export default Image;

No bloco de código acima, o componente funcioanal Image aceita um parâmetro props que será então usado no próprio componente. O componente Img é uma elemento HTML img com o atributo src apontando para o local da imagem.

Se você passar o mouse sobre uma imagem do Instagram será mostrado o número de likes, o número de comentários se for uma imagem, ou o número de reproduções se for um vídeo. Também estaremos replicando isso em nossa versão clone do aplicativo Instagram.

Ícones são exibidos no componente ImgIcons quando o usuário passa o mouse sobre a imagem (veremos isso posteriormente). Os ícones Play e Heart são exibidos conforme image.isVideo seja verdadeiro ou falso.

Seria interessante mostrar o número de engajamentos em uma imagem ou vídeo em particular, quando passamos o mouse. Isso é implementado usando CSS e adicionando uma sobreposição à imagem mostrando a contagem de curtidas / visualizações e comentários. Algo como mostrado no bloco de código abaixo:

HTML

<div class="imageContainer">
  <img class="imageSource" />
  <div class="imgageOverlay"></div>
</div>

CSS

.imageContainer {
  position: relative;
}
.imageSource {
  width: 400px;
  height: 400px;
}
.imageContainer:hover {
  .imgageOverlay {
    display: block;
  }
}
.imageOverlay {
  display: none;
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
}

No bloco de código acima, o elemento div imageContainer é um elemento-pai contendo dois elementos div filhos. Quando passamos o mouse sobre o elemento div imageContainer o valor da propriedade display do elemento div imageOverlay é definido para block criando a sobreposição escura sobre a imagem.

Usando Styled Components isso pode ser feito consultando outro componente dentro de um componente. Isso é conhecido como "component selector pattern" (padrão de seletor de componentes). Sempre que um componente é criado ou encapsulado pela função construtora, styled() também é atribuída uma classe CSS estável para uso no alvo.

Como visto no snippet de código acima, no componente Image.js, o padrão de seletor de componentes é usado da seguinte maneira:

JavaScript


const ImgContainer = styled.div`
position: relative;
flex-basis: 100%;
flex-basis: calc(33.333% - 20px);
margin: 10px;
cursor: pointer;
transition: .5s all ease-in;
`
const ImgMeta = styled.div`
display: none;
align-items: center;
justify-content: center;
position: absolute;
background-color: rgba(0, 0, 0, .5);
top: 0;
right: 0;
bottom: 0;
left: 0;
${ImgContainer}:hover & {
  display: flex !important;
}
`

Para o componente ImgMeta foi declarado inicialmente nas CSS display: none; e quando o usuário passa o mouse sobre o elemento-pai daquele elemento a declaração muda para muda display: flex; revelando ImgMeta.

Uma cuidado a ser observado no padrão mostrado acima é que a ordem de criação dos componentes é importante e não deve ser alterada. Observe que no exemplo mostrado o componente ImgContainer antes de ser usado no componente ImgMeta.

Estilos globais

Há casos em que um conjunto de estilos se aplica globalmente a todo o app React. Nesses casos podemos criar um arquivo, na pasta src tal como index.css capaz de supris essa necessidade. Por outro lado, podemos usar Styled Components para escrever os estilos globais.

Para isso crie uma nova a pasta src/theme e dentro dela um arquivo denominado globalStyle.js. Nesse arquivo inclua o seguinte bloco de código:

JavaScript


// globalStyle.js
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 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 GlobalStyle;

A função createGlobalStyle é importada da biblioteca Styled Components. Trata-se de uma função auxiliar da biblioteca StyledComponent destinada a manipular estilos globais.

A seguir você deve importar o arquivo de estilos globais no topo da árvore do React e tais estilos serão injetados quando o componente for "renderizado".

JavaScript


// App.js
import React, { Fragment } from 'react';
import styled from 'styled-components';
import Header from './components/Header.js';
import Profile from './components/Profile.js';
import GlobalStyle from './theme/globalStyle';
const AppWrapper = styled.div`
  background-color: #fafafa;
`;
function App() {
  return (
    <Fragment>
      <GlobalStyle />
      <AppWrapper>
        <Header />
        <Profile />
      </AppWrapper>
    </Fragment>
  );
}
export default App;

Estendendo Styled Components

Styled Components oferecem suporte extensões de estilos. Isso significa que um componente pode herdar os estilos de outro componente e estendê-lo com alguns novos estilos.

No exemplo a seguir, criamos estilos globais para um componente Button e a seguir o passamos para o construtor styled() de um componente GreenButton que estende os estilos globais sobrescrevendo três propriedades CSS de cor.

JavaScript


import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  border-radius: 3px;
  color: palevioletred;
  color: ${props => (props.primary ? 'violet' : 'palevioletred')};
  border: ${props =>
    props.primary ? '2px solid violet' : '2px solid palevioletred'};
  margin: 0 1em;
  padding: 0.25em 1em;
  transition: 0.5s all ease-out;
  &:hover {
    color: white;
    background-color: ${props =>
      props.primary ? 'violet' : 'palevioletred'};
  }
`;
const GreenButton = styled(Button)`
  background-color: white;
  color: green;
  border-color: green;
`;
function App() {
  return (
    <div>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Button>I am a Button</Button>
      <Button primary>I am a Primary Button</Button>
      <GreenButton primary>I am a Primary Button</GreenButton>
    </div>
  );
}
export default App;

Para mais informações sobre extensão de estilos na biblioteca Styled Components consulte a documentação de Styled Components.

Styled Components e CSS reutilizável

Styled Components também oferece suporte para CSS reutilizável. Para isso é necessário importar uma função auxiliar da biblioteca denominada css. A função auxiliar é usada para gerar CSS a partir de um Template Literals com interpolações, conforme mostrado a seguir.

JavaScript


import styled, { css } from 'styled-components';
const complexMixin = css`
  color: ${props => (props.whiteColor ? 'white' : 'black')};
`;
// This is an example of a nested interpolation
const StyledComp = styled.div`
  ${props => (props.complex ? complexMixin : 'color: blue;')};
`;

No bloco de código acima o segundo operador ternário mostrado se verdadeiro aplica os estilos definidos em complexMixin no componente StyledComp.

A função auxiliar css também permite gerar CSS válido usando template literais com interpolações, o que significa gerar CSS usando ${} aninhado dentro de outro Template Literals como mosytrado a seguir.

JavaScript


import styled, { css } from 'styled-components'
const Button = styled.button`
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  border-radius: 3px;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  transition: 0.5s all ease-out;
  ${props => props.primary &&
    css`
    background-color: white;
      color: green;
      border-color: green;
  `};
`;

No bloco de código acima, os estilos definidos na função auxiliar css somente serão aplicados se uma props.primary existir. Para mais informações sobre a função auxiliar css consulte a documentação de Styled Components.

Criação de temas com Styled Components

Styled Components oferece suporte para criação de temas. Há necessidade de se importar o componente nativo denominado <ThemeProvider>. No wrapper <ThemeProvider> define-se um atributo denominado theme cujo valor carrega os estilos a serem aplicados aos componentes-filhos de <ThemeProvider>.

Isso significa que todos os Styled Components terão acesso ao tema, mesmo quando eles tiverem vários níveis de aninhamento.

JavaScript


import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;
// We are passing a default theme for Buttons that aren't wrapped in the ThemeProvider
Button.defaultProps = {
  theme: {
    main: 'palevioletred',
  },
};
// Define what props.theme will look like
const themeSettings = {
  main: 'mediumseagreen',
};
function App() {
  return (
    <div>
      <Button>Normal</Button>
      <ThemeProvider theme={themeSettings}>
        <Button>Themed</Button>
      </ThemeProvider>
    </div>
  );
}
export default App;

No exemplo acima, criamos um componente Button que aceita props para estilos dinâmicos, nesse caso, uma props theme. O componente Button também tem uma configuração de tema padrão a ser aplicada sempre que a props theme não for passada.

Na declaração de retorno da função, há duas variações do botão, uma com estilização global e a outra envolvida em um componente ThemeProvider. Nessa passamos themeSettings como props o que faz com que o segundo botão seja estilizado com os estilos globais e mais os estilos definidos em os estilos CSS definidos no objeto themeSettings. Para mais informações sobre temas consulte a documentação de Styled Components.

Nesse tutorial mostramos algumas das funcioanlidades de Styled Component, contudo elas não param por aqui. existe uma variedade enosrme de outras possibilidades de estilização para você explorar. Criamos um aplicativo simples ( um clone do Instagram) que nos deu uma visão geral dos de Styled Component. Para mais informações consulte a documentação oficial de Styled Components. Os códigos do aplicativo Stylagram podem ser consutados no GitHub. Se você já usou Styled Components em seu projeto sinta-se à vontade para compartilhar sua experiência na área de comentários.

Compartilhe essa matéria com seus amigos

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.