![\"Perdido](\"https://media.giphy.com/media/Xa4cgAajpedUXUFoUw/giphy.gif\")
Falaa Galeraaa! Antes de irmos para o assunto principal desse artigo, vamos ouvir juntos Rosa de Saron - O Sol da Meia Noite.
\nQuando eu estava pensando em desenvolver esse blog, eu pensei...
\n\n\nEis a questão... Vou utilizar algum framework front-end tipo bootstrap, materialize ou fazer tudo do 0 utilizando Styled Components?
\n
Claro que o mais confortável e rápido a se fazer e utilizar um framework que agiliza todo o processo... Mas estava disposta a desenvolver tudo do zero utilizando apenas o Styled Components. E é sobre ele que irei falar hoje, mostrando 4 razões para você utilizar essa lib fantástica!
\n![\"Perdido](\"https://media.giphy.com/media/JSvgjnJawWYqZJGsVU/giphy.gif\")
O styled components e uma lib que nos permite escrever código css dentro do JS ele nos permitem traduzir a definição dos estilos de nosso aplicativo em componentes, em vez de trabalhar em folhas de estilo CSS. Ele e compatível com vários navegadores, fácil de usar, permite que você atualize dinamicamente por meio das props.
\n\n\nCo-creator Max Stoiber says:
\nThe basic idea of styled-components is to enforce best practices by removing the mapping between styles and components.
\n
Vamos para o que interessa: As 4 Razões!
\nUma das principais vantagens é a possibilidade de definir um theme para sua aplicação apenas envolvendo o ThemeProvider que consequentemente todos os componentes vão receber as variáveis do theme. Obs: Tudo isso e possível graças as API do React Context!
\ncomo, por exemplo:
\nconst theme = {\n\tcolor: {\n\t\tred: '#ff0000'\n\t}\n\tfontSize:{\n\t\th1: {\n\t\t\tfontSize: 2rem;\n\t\t}\n\t}\n}\n\nexport default themeNo index.js
\nimport React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport theme from \"./config/theme\"\nimport App from \"./App\"\nimport { ThemeProvider } from \"styled-components\"\n\nReactDOM.render(\n <ThemeProvider>\n <App />\n </ThemeProvider>,\n document.getElementById(\"root\")\n)Agora qualquer componente estilizado tem acesso ao seu theme!
\nimport styled from \"styled-components\"\n\nexport const Container = styled.div`\n background-color: ${props => props.theme.colors.red};\n`Você consegue modificar o que irá renderizar em um componente e passar por parâmetros.
\nimport styled from \"styled-components\"\n\nexport const Container = styled.div`\n background: ${props => (props.background ? props.background : \"#F5F5F5\")};\n`import React from \"react\"\nimport { Container } from \"./styles\"\n\nconst ContainerRed = () => {\n return <Container background=\"#fff\"></Container>\n}\n\nexport default ContainerRedMuito fácil fazer referências de elementos, muito semelhante também com o CSS ou Sass.
\nSupondo que um container e você deseja adicionar uma animação do hover, ficaria dessa maneira:
\nimport styled from \"styled-components\"\n\nexport const Container = styled.div`\n background: yellow;\n\n &:hover {\n background: red;\n }\n`Outra coisa divertida no styled components e que você consegue estender um estilo já criado, assim você não sobrecarrega os componentes como, por exemplo:
\nimport styled from \"styled-components\"\n\nexport const Button = styled.div`\n color: black;\n`import styled from \"styled-components\"\nimport { Button } from \"./stylesDafault\"\n\nexport const ButtonCancel = styled(Button)`\n color: red;\n`Existe muitos outros macetes, você consegue ver em detalhes na documentação.
\nO styled components nos fornecem uma maneira prática de trabalhar com os estilos onde você consegue “componentizar” e principalmente reutilizar seus estilos. Se você está na dúvida se deveria usar ou não, eu só digo uma coisa: use, teste e abuse! Conhecimento nunca e jogado fora.
\nJá utilizou essa incrível lib? Compartilha comigo aqui nos comentários, gostaria muito de saber!
\nAté a próxima.
\n![\"bye](\"https://media.giphy.com/media/rrLt0FcGrDeBq/giphy.gif\")