0
598
ViewsLa propiedad MUI v5 'fullWidth' no existe en el tipo 'IntrinsicAttributes & { theme: Theme; } & { ¿hijos?: ReactNode; }'. TS2322
Estoy usando MUI v5 y tengo un FormControl simple como se muestra a continuación. Sé que la propiedad fullWidth es válida como se describe en la documentación .
import React, { PropsWithChildren } from 'react' import { Theme } from '@mui/material/styles' import styled from '@mui/material/styles/styled' import InputLabel from '@mui/material/InputLabel' import MenuItem from '@mui/material/MenuItem' import MuiFormControl from '@mui/material/FormControl' interface SelectProps extends MuiSelectProps { id: string label?: string options?: { text: string; option: string }[] } const FormControl: React.FC<{ theme: Theme }> = styled(MuiFormControl)(({ theme }) => ({ color: theme.palette.nav.links, borderRadius: 30, width: 180, })) export const Select = ({ label, id, children, options }: PropsWithChildren<SelectProps>) => { return ( <FormControl fullWidth hiddenLabel> <InputLabel> {label} </InputLabel> </FormControl> ) }Error de TS
Failed to compile /var/www/target/component-library/src/components/Select/index.tsx TypeScript error in /var/www/target/component-library/src/components/Select/index.tsx(24,18): Type '{ children: ("" | Element | undefined)[]; fullWidth: true; hiddenLabel: true; }' is not assignable to type 'IntrinsicAttributes & { theme: Theme; } & { children?: ReactNode; }'. Property 'fullWidth' does not exist on type 'IntrinsicAttributes & { theme: Theme; } & { children?: ReactNode; }'. TS2322 22 | export const Select = ({ label, id, children, options, ...props }: PropsWithChildren<SelectProps>) => { 23 | return ( > 24 | <FormControl fullWidth hiddenLabel> | ^ 25 | {label && ( 26 | <InputLabel id={`input_${id}`} shrink={false}> 27 | {label}
·
Juan Pablo Isaza
1 answers
Answer question0
Elimine el tipo React.FC<{ theme: Theme }> al declarar el FormControl :
const FormControl = styled(MuiFormControl)(...); El componente resultante creado por el HOC de styled() puede inferir el tipo de apoyo del componente original como fullWidth o hiddenLabel , pero vuelve a afirmar el tipo en su variable. Este tipo:
React.FC<{ theme: Theme }> Significa un componente funcional que acepta un accesorio con el tipo { theme: Theme } , no tiene la propiedad fullWidth , por lo que Typescript se queja.
Si desea extender el tipo de accesorios en su componente de estilo personalizado:
const FormControl = styled(MuiFormControl)<{ yourCustomProp?: string }>(...); <FormControl yourCustomProp='...' /> 
·
Juan Pablo Isaza
Report
Answer question