DEV Community

loading...

Criando componente de Tipografia com styled-components

willianjusten profile image Willian Justen Originally published at willianjusten.com.br on ・2 min read

Introdução

Fala pessoal, eu recentemente comecei uma série de vídeos com dicas bem rápidas lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)

Vídeo

Utilizando o poder do as polymorphic

Dentro do Styled Components existe um método muito bacana, que é a polymorphic prop, que serve para criar um componente e determinar que ele se comporte como (as) a tag que você desejar.

Isso é muito legal, pois permite que criemos diferentes estilos, mas sem perder a semântica das tags e não fiquemos reféns a usar div em tudo.

No vídeo acima eu mostro como utilizar o attr junto ao as exatamente para determinar estilos visuais e também que tipo de tag deve ser.

Exemplo de código

Ao trabalhar com styled components, normalmente nós temos um tema que tem as cores e tamanhos, um exemplo seria:

const theme = {
  colors: {
    white: '#eee',
    black: '#111',
    gray: '#333',
    lightGray: 'CCC'
  },
  sizes: {
    xsmall: '1rem',
    small: '1.2rem',
    medium: '1.6rem',
    large: '2.4rem',
    xlarge: '3.2rem',
    xxlarge: '4.0rem'
  }
}
Enter fullscreen mode Exit fullscreen mode

Se você estiver utilizando TypeScript, nós também devemos determinar os types disponíveis para o componente, por exemplo:

export type HeadingProps = {
  color?: keyof typeof theme.colors
  size?: keyof typeof theme.sizes
  fontWeight?: 100 | 400 | 700
  level?: 1 | 2 | 3 | 4 | 5 | 6
}
Enter fullscreen mode Exit fullscreen mode

E aí baseado nisso, podemos criar nosso componente, tendo valores default e também podendo receber esses valores passados:

export const Heading = styled('h1').attrs<HeadingProps>(({ level }) => ({
  as: `h${level}`
}))<HeadingProps>`
  ${({
    color = 'white',
    size: 'medium',
    fontWeight: 700
  }) => css`
    font-size: ${theme.sizes[size]};
    color: ${theme.colors[color]};
    font-weight: ${fontWeight};
  `}
`
Enter fullscreen mode Exit fullscreen mode

Note que nós utilizamos um level exatamente para poder determinar qual vai ser a tag semântica e aí fazemos um concatenação da string no as para ter nosso h${level} que pode ir de 1 a 6.

Com o componente pronto, você pode usar da seguinte maneira:

<Heading>Esse é o h1 padrão branco, size medium e negrito</Heading>
<Heading level={2} size="xxlarge" color="gray">Esse é um h2 bem grande e cinza</Heading>
Enter fullscreen mode Exit fullscreen mode

Como você pode ver, esse foi um exemplo bem rápido e simples, mas você pode criar toda uma estrutura para seus Headings, textos e etc. É essa maneira que bibliotecas maiores como o Material Design utilizam.

Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no canal do YouTube para essa e mais outras dicas.

Discussion (0)

Forem Open with the Forem app