06.StyledComponents.md

Styled-Components 🎨

O que é styled-components? 🤔

styled-components é uma biblioteca de estilo que utiliza JavaScript, conhecida como CSS-in-JS. Especialmente projetada para React e React Native, foi criada em 2016 buscando uma solução mais elegante e eficiente para a estilização de componentes React.

Página oficial do Styled-components

Qual é o objetivo? Por que o utilizamos? 🎯

A ideia por trás do styled-components nasceu da necessidade de uma abordagem mais intuitiva e poderosa para escrever estilos em componentes React. Com as limitações percebidas no CSS da época, seus criadores desenvolveram o styled-components, combinando os melhores aspectos do CSS tradicional com os benefícios da arquitetura de componentes do React.

Com styled-components, você pode aplicar estilos CSS diretamente em componentes JavaScript, sem preocupações com conflitos de nomes de classes ou outras peculiaridades do CSS. Assim, em vez de separar classes e estilos, você define estilos diretamente para componentes específicos e pode até incorporar a lógica do JavaScript.

Como usamos o styled-components? 🛠️

1. Instalação:

   • No VSCode: Com seu projeto React já criado, abra o terminal (Ctrl + J) ou o Hyper e digite:

     npm install styled-components
     

2. Importação: No componente que irá estilizar, importe o styled de styled-components

   import styled from "styled-components";

Criação de Componentes Estilizados 🎨

Para criar componentes estilizados usando styled-components, siga os passos abaixo:

Definição:

Primeiramente, crie uma constante que armazenará seu componente estilizado. O nome dessa constante deve ser relevante para o seu propósito. Por exemplo, se você está criando uma caixa, pode nomeá-lo de Container.

const Container = styled.div``;

Estilização:

Adicione os estilos CSS desejados entre as crases (``). Você pode escrever o CSS como faria normalmente.

const Container = styled.div`
  background-color: blue;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
`;

Utilização:

Agora, para usar o componente estilizado que você criou, basta invocá-lo como faria com qualquer outro componente React. Por exemplo, para usar o Container:

export default function App() {
  return (
    // Chamamos nosso componente de estilo
    <Container>
      {/*  Aqui você coloca o conteúdo da div ou outras tags que quiser utilizar  */}
    </Container>
  );
}

Exemplos com styled-components 🌟

🌈 Botão Simples

const BotaoSimples = styled.button`
  background-color: green;
  color: white;
  padding: 8px 12px;
  margin: 5px;
  border: none;
  cursor: pointer;
`;

export default function App() {
  return(
    <BotaoSimples>Clique Aqui</BotaoSimples>;
  )
}

🖋 Texto Estilizado

import styled from "styled-components";

const TextoDestaque = styled.p`
  color: navy;
  font-size: 18px;
  font-weight: bold;
`;

export default function App() {
  return (
    <TextoDestaque>Texto em Destaque</TextoDestaque>;
  )
}

⚠️ Div de Alerta

import styled from "styled-components";

const Alerta = styled.div`
  background-color: yellow;
  padding: 10px;
  border: 1px solid black;
  margin-top: 10px;
`;

export default function App() {
  return(
    <Alerta>Atenção a este alerta!</Alerta>;
  )
}

Conclusão 🏁

A utilização de styled-components em React facilita o gerenciamento de estilos, mas também leva a uma experiência de desenvolvimento mais intuitiva e eficaz.

À medida que você pratica, irá descobrir a flexibilidade e o poder dos styled-components. Isso abre um universo de possibilidades para estilizar seus componentes React, permitindo a criação de interfaces atraentes, responsivas e, acima de tudo, consistentes.

🌈 Continue explorando styled-components para aprimorar suas habilidades e descobrir novas maneiras de trazer vida e personalidade aos seus projetos React.

Bons códigos e vamos para os exercícios!!!📚👨‍💻

Exercícios - Clique aqui!

Próxima matéria - Clique aqui!