Criando seu próprio tema com styled-components
Felipe Austriaco
Posted on April 5, 2021
O que é tema
Tema são as cores, tamanhos de fontes, espaçamento entre elementos da aplicação e o que mais você quiser.
Porquê perder tempo com isso, não posso só aplicar tudo isso pelo css?
Pode sim, o problema é que pode virar uma bola de neve. A cada componente novo você usa medidas diferentes para margins e paddings, cores mais claras ou escuras e tamanhos de fontes divergentes, fazendo com que a aplicação não tenha nenhum padrão de estilização.
Quais os pontos positivos ao usar um tema?
- A aplicação seguirá um padrão de cores, tamanhos e medidas.
- Menos CSS redundante, mantendo um código mais limpo.
- Alterações como cores, tamanho de fontes e etc são triviais, já que toda aplicação busca informações do tema.
Certo, então como crio um Tema?
Bom, vamos lá então. Nesse artigo estamos usando styled-components e irei supor que você está usando Typescript (por favor, esteja :D) para ter o type-checking do nosso tema.
Criação do tema em si
Podemos criar um arquivo chamado theme.ts
para definir nosso tema:
export const theme = {
colors: {
primary: '#000000',
secondary: '#FFFFFF',
}
}
No mesmo arquivo exportaremos também um type
do nosso tema para ter o type-checking:
export type ITheme = typeof theme;
Type-checking do tema para o styled-components
De acordo com a documentação do styled-components, devemos extender a interface de Tema original com o nosso type, para isso precisaremos de um arquivo .d.ts
, no qual irá se chamar styled.d.ts
import 'styled-components';
import { ITheme } from './theme';
declare module 'styled-components' {
export interface DefaultTheme extends ITheme {}
}
ThemeProvider, a parte mais fácil!
Agora que já temos nosso tema criado e com typechecking, só precisamos fazer nossa aplicação inteira conhecer ele. o styled-components faz isso através do componente <ThemeProvider />
utilizando Context API por debaixo dos panos.
No nosso App.tsx:
import { ThemeProvider} from 'styled-components';
import { theme } from '../theme.ts';
export default function App() {
<ThemeProvider theme={theme}>
...resto da aplicação
</ThemeProvider>
}
Utilizando o tema
Com o nosso tema configurado, conseguimos usá-lo em qualquer componente styled-components, exemplo:
import styled from 'styled-components';
export const Container = styled.main`
background: ${({ theme }) => theme.colors.primary} // aqui vai ter typechecking!!
`;
Posted on April 5, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.