O documento discute como estilizar componentes sem estresse usando styled components. Apresenta as vantagens como sem colisão de classes, estilo dinâmico de maneira simples e manutenção simples. Em seguida, exemplifica como criar componentes, estender estilos e aplicar estilos globais usando styled components.

1. Roberto Tauille @robertotauille
Fullstack, Aposta.la / Sysgaming
maHh oe!

2. Estilizando components sem stress
@robertotauille

3. @robertotauille

4. @robertotauille
●
●
●
●
●
●
●
Até pouco tempo atrás não havia suporte para:

5. @robertotauille

6. @robertotauille

7. @robertotauille
● Sem colisão de classes
● Estilo dinâmico de maneira simples
● Manutenção simples
● Prefixing automático
Vantagens de uso:

8. @robertotauille

9. @robertotauille

10. @robertotauille
● Criando um componente com styled components
● Estender estilos
● Estilizando componentes
● Button Component
● Estilos globais e temas
Vamos aos exemplos:

11. @robertotauille
● Criando um componente com styled components
● Estender estilos
● Estilizando componentes
● Button Component
● Estilos globais e temas
Vamos aos exemplos:

12. @robertotauille
● Criando um componente com styled components
● Estender estilos
● Estilizando componentes
● Button Component
● Estilos globais e temas
Vamos aos exemplos:

13. @robertotauille
● Criando um componente com styled components
● Estender estilos
● Estilizando componentes
● Button Component
● Estilos globais e temas
Vamos aos exemplos:

14. @robertotauille
● Criando um componente com styled components
● Estender estilos
● Estilizando componentes
● Button Component
● Estilos globais e temas
Vamos aos exemplos:

15. @robertotauille

16. @robertotauille

17. @robertotauille

18. @robertotauille
● https://github.com/styled-components/polished
● https://github.com/morajabi/styled-media-query
● https://github.com/jacobwgillespie/styled-icons
● https://github.com/styled-components/vue-styled-components
Bibliotecas utéis:
● https://github.com/robertotauille/styled-components
Repo de exemplo: