styled-components

Caso não lembre como funciona o processo de entrega, clique aqui

O que você precisa saber e praticar desta aula?

1. Estilizar componentes;
2. Estilizar componentes aninhados;
3. Estilizar globalmente

Como eu vou executar os exercícios?

Vamos utilizar o LabeTube, da aula anterior. Nesse exercício vamos mudar a forma que nosso projeto é estilizado. Ao invés de usar o CSS, vamos usar o JS com styled-components. Lembre-se sempre de instalar e importar o styled-components antes de usá-lo.

npm install styled-components

import styled from 'styled-components'

Para executar este exercício, você pode criar uma nova aplicação React, como foi visto na aula passada, ou utilizar o link abaixo para ir ao template no CodeSandbox. Este template para exatamente onde o exercício da última aula acaba.

Template do CodeSandbox

Caso queira usar uma aplicação React, rode npm install neste projeto, para baixar as dependências e poder executá-lo.

Exercício 1

Altere os elementos header,main, nav do componente App, para que sua estilização passe a ser feita usando styled-components.

Exercício 2

Altere o componente CardVideo, para que ele seja estilzado com styled-components.

Informações úteis sobre o assunto

Documentação do styled-components em inglês