Executando verificação de segurança...
1

[Dúvida] Como funciona o css no tabnews?

Estudando o repositório do tabnews eu fiquei muito confuso quanto a estilização dele. Alguém poderia me dizer como foi feito?

Eu acho que foi utilizado styled components, mas a maneira que foi organizada e implementada, qual seria o nome desse padrão de projeto?

Por exemplo, esse componente Box aqui que foi criado com esse código gigante:

import { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
import { SxProp } from '../sx';
import { ComponentProps } from '../utils/types';
declare const Box: import("styled-components").StyledComponent<"div", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;
export type BoxProps = ComponentProps<typeof Box>;
export default Box;

Eu não entendi nada do motivo de ser assim e por que tanta coisa. Alguém poderia ter a gentileza de me explicar? 😁

Carregando publicação patrocinada...
1