[Sugestão] Na documentação da aula está faltando um & na tipagem do typrography | React: evolua o seu Design System com TailwindCSS

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso React: evolua o seu Design System com TailwindCSS

por Walace Felix Silvério

| 264.5k xp | 9 posts

Desenvolvedor Front-end

Na documentação da aula está faltando o &. Além disso fiz igual na aula, mas mesmo assim, o tamanho da tipografia não mudou.

import React from "react";

export type TypographyProps = {
  variant?: 'primary' | 'secondary' | 'tertiary';
  size?: 'xs' | 'sm' | 'md' | 'xl' | 'title1' | 'title2' | 'title3';
  children: React.ReactNode;
  element?: keyof JSX.IntrinsicElements;
} & JSX.IntrinsicElements['p'];

const variantClassMap = {
  variant: {
    primary: "text-gray-primary",
    secondary: "text-gray-secondary",
    tertiary: "text-gray-tertiary",
  },
  size: {
    xs: "text-xs",
    sm: "text-sm",
    md: "text-md",
    xl: "text-xl",
    title1: "text-txl",
    title2: "text-tlg",
    title3: "text-tmd",
  },
};

const Typography = ({
  variant = "primary",
  size = "md", 
  children, 
  element = "p",
  ...rest
}: TypographyProps) => {
  const Element = element as any;
  return ( <Element 
    className={`text-gray-primary text-sm font-normal 
${variantClassMap.variant[variant]} ${variantClassMap.size[size]}`} 
    {...rest}
  >
    {children}
  </Element>
  )
}

export default Typography

Imagem da documentação com o & faltando na tipagem. cdn1.gnarususercontent.com.br/1/110863/1f0332e1-7fd6-4510-85fe-680dc7bb7617.png

2 respostas

solução!

por Neilton Seguins

| 319.8k xp | 464 posts

Instrutor Instrutor e desenvolvedor de software

30/08/2023

Olá, Walace! Como vai?

Sua observação sobre a documentação da aula é muito pertinente. Realmente, o símbolo "&" é necessário na tipagem para que possamos estender as propriedades do elemento 'p' do JSX. A documentação deveria estar assim:

export type TypographyProps = {
  variant?: 'primary' | 'secondary' | 'tertiary';
  size?: 'xs' | 'sm' | 'md' | 'xl' | 'title1' | 'title2' | 'title3';
  children: React.ReactNode;
  element?: keyof JSX.IntrinsicElements;
} & JSX.IntrinsicElements['p'];

Fiz a correção na transcrição do vídeo em questão. Obrigado pela observação.

Quanto ao problema com o tamanho da tipografia, notei que você está usando a classe "text-sm" fixa na sua classe CSS. Isso pode estar sobrescrevendo o tamanho que você está tentando definir com a propriedade 'size'.

Tente remover a classe "text-sm" da definição da classe, deixando assim:

const Typography = ({
  variant = "primary",
  size = "md", 
  children, 
  element = "p",
  ...rest
}: TypographyProps) => {
  const Element = element as any;
  return ( <Element 
    className={`text-gray-primary font-normal 
${variantClassMap.variant[variant]} ${variantClassMap.size[size]}`} 
    {...rest}
  >
    {children}
  </Element>
  )
}

Assim, o tamanho da tipografia será definido apenas pela propriedade 'size' e não será sobrescrito pela classe "text-sm".

Espero ter ajudado e bons estudos!

por Michelson

| 56k xp | 4 posts

07/09/2023

Ola ! Tive a mesma blocagem, até descobrir que na verdade estava faltando as variaveis css de title na folha global.css e no tailwind config. Nao foi adicionado no curso anterior.

Espero que possa ajudar.