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

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

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.

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

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

Documentação do styled-components em inglês) Criando styled-components com React | Blog Matheus Castiglioni