0
198
Vistas¿Cómo escribir accesorios de tipografía MUI? v5
Entiendo lo que debo hacer, obtener la definición de tipo para Typography.variant . Sin embargo, no estoy seguro de cómo obtenerlos realmente.
interface TextProps { variant?: string component?: string onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void } export const Text = ({ children, variant = 'body1', component = 'body1', onClick }: PropsWithChildren<TextProps>) => { return ( <Typography variant={variant} component={component} onClick={onClick}> {children} </Typography> ) }Error de TS
No overload matches this call. Overload 2 of 2, '(props: DefaultComponentProps<TypographyTypeMap<{}, "span">>): Element', gave the following error. Type 'string' is not assignable to type '"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "body1" | "subtitle1" | "subtitle2" | "body2" | undefined'. TS2769
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Creo que así es como puede corregir los errores de tipo, tanto la variant como el component no son cadenas, puede consultar el archivo de definición de tipo de Typography aquí como referencia.
import Typography, { TypographyTypeMap } from "@mui/material/Typography"; interface TextProps { variant?: TypographyTypeMap["props"]["variant"]; component?: React.ElementType; onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void; } 
·
Juan Pablo Isaza
Denunciar
0
He tenido el mismo problema, y lo pude solucionar de esta manera. Basándonos en tu código:
import React from 'react'; import { Variant } from '@mui/material/styles/createTypography'; interface TextProps { variant?: Variant component?: React.ElementType onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void } export const Text = ({ children, variant = 'body1', component = 'body1', onClick }: PropsWithChildren<TextProps>) => { return ( <Typography variant={variant} component={component} onClick={onClick}> {children} </Typography> ) }Hay otra conversión al elemento concerniente usando 'as'. P.ej:
<Typography variant={variant as Variant } component={component as React.ElementType } onClick={onClick}> {children} </Typography>Esta forma se usa más cuando se usan objetos planos, pero en el caso de que haya usado una interfaz, la mejor práctica es definir sus tipos de propiedades en la interfaz.
¡Pulgares hacia arriba!
·
Juan Pablo Isaza
Denunciar
Responde la pregunta