Utilizando Styled-Components com React e TypeScript: Um Guia Prático

Styled-components é uma biblioteca que permite a você usar estilos em nível de componente de uma maneira que encapsula completamente o CSS em seus componentes React. Isso facilita a manutenção dos estilos, promove a reutilização de componentes e melhora a coesão do código. Vamos explorar como integrar styled-components em um projeto React com TypeScript.

Instalação

Para começar, instale styled-components e seu tipo de definição para TypeScript:

npm install styled-components
npm install --save-dev @types/styled-components

Configuração com TypeScript

Para usar styled-components com TypeScript, você pode precisar definir temas ou propriedades adicionais. Uma prática comum é criar um tema usando o padrão de design de ThemeProvider fornecido pela biblioteca.

Primeiro, defina o tema:

import { DefaultTheme } from 'styled-components';

export const theme: DefaultTheme = {
  colors: {
    primary: '#0070f3',
    background: '#fff',
    text: '#333',
  },
  fonts: {
    main: 'Helvetica Neue, Arial, sans-serif',
  },
};

Certifique-se de estender a definição do DefaultTheme para adicionar tipagem correta:

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    colors: {
      primary: string;
      background: string;
      text: string;
    };
    fonts: {
      main: string;
    };
  }
}

Criando componentes estilizados

Agora você pode começar a criar componentes estilizados. Aqui está um exemplo simples de um botão:

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.theme.colors.primary};
  color: white;
  font-family: ${props => props.theme.fonts.main};
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;

  &:hover {
    background-color: darken(${props => props.theme.colors.primary}, 10%);
  }
`;

export default Button;

Uso em componentes React

Você pode usar seus componentes estilizados como qualquer outro componente React. Aqui está como você pode usar o Button:

import React from 'react';
import Button from './components/Button';
import { ThemeProvider } from 'styled-components';
import { theme } from './theme';

const App: React.FC = () => (
  <ThemeProvider theme={theme}>
    <div>
      <h1>Hello Styled-Components</h1>
      <Button>Click me</Button>
    </div>
  </ThemeProvider>
);

export default App;

Conclusão

Styled-components oferece uma abordagem poderosa e flexível para estilizar aplicativos React. Ao combinar JavaScript com CSS, você obtém o benefício de estilos dinâmicos que são completamente encapsulados nos componentes, melhorando a escalabilidade e manutenibilidade do seu projeto. Com a integração do TypeScript, você também garante a segurança dos tipos em seus estilos, tornando o desenvolvimento ainda mais robusto.

Experimente styled-components em seu próximo projeto React e veja como ele pode transformar a maneira como você trabalha com estilos em sua aplicação.