Como Integrar e Configurar Styled Components com Vite + React-TS para Estilização Modular e Temas Dinâmicos

A combinação de Vite, React e TypeScript oferece um ambiente de desenvolvimento rápido, moderno e bem estruturado. Quando adicionamos o styled-components a essa stack, ganhamos uma forma eficiente e organizada de estilizar componentes React com total suporte à tipagem e reutilização.

Este artigo apresenta um guia completo para integrar styled-components em uma aplicação criada com Vite + React-TS, abordando desde a instalação até a criação de componentes estilizados e temas dinâmicos.

O Que É styled-components?

O styled-components é uma biblioteca CSS-in-JS que permite escrever estilos diretamente dentro dos componentes React, utilizando template literals do JavaScript. Isso elimina a necessidade de arquivos CSS externos e traz vantagens como:

• Estilização encapsulada por componente
• Uso de variáveis, condicionais e lógica reutilizável
• Suporte nativo a props dinâmicas
• Integração completa com TypeScript para segurança de tipos

Essas características fazem do styled-components uma escolha popular para projetos modernos baseados em React.

Por Que Usar styled-components com Vite + React-TS?

Ao usar Vite com React-TS, temos um ambiente de desenvolvimento rápido graças ao suporte nativo ao TypeScript e ao Hot Module Replacement. A integração com styled-components potencializa esse setup, pois:

• Mantém a modularidade e clareza da arquitetura de componentes
• Reduz a complexidade no gerenciamento de folhas de estilo
• Oferece total suporte a temas globais e personalizáveis
• Garante segurança de tipos com TypeScript

Essa combinação resulta em aplicações mais organizadas, fáceis de manter e escaláveis.

Passo a Passo: Configuração Inicial do Projeto

Para começar, crie um novo projeto usando o template React-TS do Vite:

npm create vite@latest my-app --template react-ts
cd my-app
npm install

Instale as dependências necessárias para utilizar styled-components:

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

Com isso, você terá um ambiente funcional com Vite, React, TypeScript e suporte completo ao styled-components.

Criando Componentes Estilizados

Um dos principais benefícios do styled-components é a capacidade de criar componentes com estilos encapsulados e reutilizáveis. Abaixo está um exemplo básico de botão estilizado:

// src/components/Button.tsx
import styled from 'styled-components'

interface ButtonProps {
  primary?: boolean
}

const Button = styled.button<ButtonProps>`
  background-color: ${(props) => (props.primary ? '#0070f3' : '#fff')};
  color: ${(props) => (props.primary ? '#fff' : '#000')};
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: ${(props) => (props.primary ? '#005bb5' : '#eee')};
  }
`

export default Button

E aqui está como utilizá-lo em seu componente principal:

// src/App.tsx
import Button from './components/Button'

function App() {
  return (
    <div>
      <h1>Meu Botão Estilizado</h1>
      <Button primary>Clique Aqui</Button>
      <Button>Botão Secundário</Button>
    </div>
  )
}

export default App

Implementando Temas Globais

O styled-components permite definir temas globais facilmente, facilitando a troca de paletas de cores, fontes e outros estilos em toda a aplicação.

Crie um arquivo com os temas disponíveis:

// src/themes/defaultTheme.ts
import { DefaultTheme } from 'styled-components'

export const lightTheme: DefaultTheme = {
  colors: {
    background: '#ffffff',
    text: '#000000',
    primary: '#0070f3'
  },
  borderRadius: '4px'
}

export const darkTheme: DefaultTheme = {
  colors: {
    background: '#121212',
    text: '#ffffff',
    primary: '#00bcd4'
  },
  borderRadius: '4px'
}

Agora, crie um contexto para alternar entre os temas:

// src/context/ThemeContext.tsx
import { createContext, useState, ReactNode } from 'react'
import { lightTheme, darkTheme } from '../themes/defaultTheme'
import { ThemeProvider } from 'styled-components'

type ThemeMode = 'light' | 'dark'

interface ThemeContextType {
  themeMode: ThemeMode
  toggleTheme: () => void
}

export const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

interface ThemeProviderWrapperProps {
  children: ReactNode
}

export const ThemeProviderWrapper = ({ children }: ThemeProviderWrapperProps) => {
  const [themeMode, setThemeMode] = useState<ThemeMode>('light')

  const toggleTheme = () => {
    setThemeMode((prev) => (prev === 'light' ? 'dark' : 'light'))
  }

  const currentTheme = themeMode === 'light' ? lightTheme : darkTheme

  return (
    <ThemeProvider theme={currentTheme}>
      <ThemeContext.Provider value={{ themeMode, toggleTheme }}>
        {children}
      </ThemeContext.Provider>
    </ThemeProvider>
  )
}

No arquivo main.tsx, envolva o componente principal com o provedor de tema:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { ThemeProviderWrapper } from './context/ThemeContext'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ThemeProviderWrapper>
      <App />
    </ThemeProviderWrapper>
  </React.StrictMode>
)

Agora você pode acessar as propriedades do tema em seus componentes estilizados:

const Container = styled.div`
  background-color: ${(props) => props.theme.colors.background};
  color: ${(props) => props.theme.colors.text};
  min-height: 100vh;
  padding: 2rem;
`

Considerações sobre SSR e Desempenho

Se você estiver trabalhando com Server Side Rendering (SSR), é importante garantir que o styled-components seja renderizado corretamente no lado do servidor. Para isso, consulte a documentação oficial ou guias específicos sobre como configurar SSR com Vite e styled-components.

Felizmente, em projetos sem SSR, a integração é simples e funciona perfeitamente “out of the box”.

Além disso, o uso de temas e estilos encapsulados não afeta negativamente o desempenho da aplicação, desde que utilizados de maneira otimizada.

Conclusão

Integrar styled-components com Vite + React-TS é uma excelente escolha para projetos modernos, combinando velocidade, produtividade e segurança de tipos. Com esta configuração, é possível:

• Criar componentes estilizados de forma modular e reutilizável
• Aplicar estilos com lógica condicional e variáveis
• Implementar temas globais e alternar entre eles dinamicamente
• Garantir tipagem segura com TypeScript