O que são componentes estilizados?

Styled Components é uma biblioteca popular para React que permite aos desenvolvedores escrever CSS diretamente em seu código JavaScript. Esta biblioteca aproveita literais de modelo marcados para estilizar seus componentes. Ele promove o uso de estilos em nível de componente, ajudando a manter as preocupações de estilo e estrutura de elementos separadas e tornando o código geral mais fácil de manter.

Benefícios do uso de componentes estilizados

1. Estilo dinâmico: Componentes estilizados permitem que você use JavaScript para definir estilos dinamicamente com base em adereços, estado ou qualquer outra variável.

2. Melhor organização: Manter os estilos próximos aos componentes que eles afetam torna seu código mais modular e mais fácil de gerenciar.

3. Sem erros de nome de classe: Como os estilos têm como escopo componentes, você não precisará se preocupar com colisões de nomes de classe ou com problemas de especificidade que são comuns com CSS tradicional.

4. Suporte a temas: Styled Components oferece suporte integrado para temas, facilitando a aplicação de estilos consistentes em seu aplicativo.

Instalando componentes estilizados

Para começar a usar Styled Components, você precisa instalá-lo via npm ou yarn:

npm install styled-components

or

yarn add styled-components

Uso Básico

Aqui está um exemplo básico para ilustrar como os componentes estilizados funcionam:

import styled from "styled-components";

// Styled component named StyledButton
const StyledButton = styled.button`
  background-color: black;
  font-size: 32px;
  color: white;
`;

function Component() {
  // Use it like any other component.
  return  Login ;
}

Adaptação com base em acessórios

Os componentes estilizados são funcionais, portanto, podemos facilmente estilizar os elementos de forma dinâmica.

import styled from "styled-components";

const StyledButton = styled.button`
  min-width: 200px;
  border: none;
  font-size: 18px;
  padding: 7px 10px;
  /* The resulting background color will be based on the bg props. */
  background-color: ${props => props.bg === "black" ? "black" : "blue";
`;

function Profile() {
  return (
    

      Button A
      Button B
    
  )
}

Tema

Styled Components também oferece suporte a temas, permitindo definir um conjunto de estilos (como cores, fontes, etc.) e aplicá-los de forma consistente em todo o seu aplicativo.

Primeiro, você define seu tema:

import { ThemeProvider } from 'styled-components';

const theme = {
  primary: 'blue',
  secondary: 'gray',
};

Em seguida, envolva seu aplicativo com o ThemeProvider e passe seu tema:

const App = () => (
  
    

      Primary Button
      Default Button
    
  
);

Finalmente, acesse as propriedades do tema em seus componentes estilizados:

const Button = styled.button`
  background: ${(props) => (props.primary ? props.theme.primary : props.theme.secondary)};
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid ${(props) => props.theme.primary};
  border-radius: 3px;
`;

Conclusão

Styled Components é uma ferramenta poderosa para desenvolvedores React que buscam melhorar a capacidade de manutenção e escalabilidade de seus aplicativos. Ao encapsular estilos dentro de componentes e aproveitar todo o poder do JavaScript, Styled Components fornece uma abordagem moderna e eficiente para estilizar aplicativos da web. Esteja você trabalhando em um projeto pequeno ou em um aplicativo de grande escala, os Styled Components podem ajudá-lo a manter seus estilos organizados e seu código limpo.