Caja de arena aquí: https://codesandbox.io/s/agitated-ardinghelli-fnoj15?file=/src/temp4.tsx:0-1206 .
import { FormControl, FormControlProps, Grid, GridProps } from "@mui/material"; interface ICustomControlProps { gridProps?: GridProps; formControlProps?: FormControlProps; } const CustomControl = (props: ICustomControlProps) => { return ( <Grid {...props.gridProps}> <FormControl {...props.formControlProps} /> </Grid> ); }; const CustomControlVariant1 = (props: ICustomControlProps) => { return ( <CustomControl /** * Below gridProps is of type GridProps. * It is set to object with some fixed (item, xs, sm, md) properties and spreaded props.gridProps * (which is of type GridProps). * But doing exactly same with formControlProps doesnt work: setting fixed component properties * and spreaded props.formControlProps */ gridProps={{ item: true, xs: 12, sm: 12, md: 12, ...props.gridProps }} formControlProps={{ component: "fieldset", /** ERROR: Type '{ children?: React.ReactNode; classes?: Partial<FormControlClasses> & * Partial<ClassNameMap<never>>; color?: "error" | ... 4 more ... | "warning"; ... * 264 more ...; component: string; }' is not assignable to type 'FormControlProps<"div", {}>'. * Object literal may only specify known properties, and 'component' does not exist in type * 'FormControlProps<"div", {}>'. * * Object literal may only specify known properties, and 'component' * does not exist in type 'FormControlProps<"div", {}>'.ts(2322) */ ...props.formControlProps }} /> ); };Actualizar
Tenga en cuenta que agregar otro nivel de propagación para FormControl funciona:
<CustomControl gridProps={{ item: true, xs: 12, sm: 12, md: 12, ...props.gridProps }} // this works!! So, `component` is indeed on `FormControlProps` // which can be confirmed here: https://mui.com/api/form-control/#props formControlProps={{ ...{ component: "fieldset", ...props.formControlProps } }} />Aquí está el sandbox para este código.
Encuentro que ambos enfoques son lógicamente correctos y, en mi opinión, ambos deberían funcionar, pero no entiendo por qué el primero da un error.
Para hacer feliz a TypeScript, puede modificar ICustomControlProps de la siguiente manera:
interface ICustomControlProps { gridProps?: GridProps; formControlProps?: FormControlProps & { component: React.ElementType }; } Echemos un vistazo al archivo de declaración de FormControl :
declare const FormControl: OverridableComponent<FormControlTypeMap>; export type FormControlProps< D extends React.ElementType = FormControlTypeMap['defaultComponent'], P = {}, > = OverrideProps<FormControlTypeMap<P, D>, D>; De manera concisa, FormControlProps reunirá los accesorios del componente predeterminado (que es un div ; por lo tanto, algunos accesorios que un elemento DOM específico puede tomar) y los accesorios que definen el componente FormControl (estos se pueden encontrar en FormControlTypeMap , por ejemplo, classes , fullWidth , hiddenLabel , etc.).
En FormControlTypeMap seguramente no hay una propiedad de component definida y, por lo tanto, el error. Sin embargo, OverridableComponent<FormControlTypeMap> dice que se acepta recibir un accesorio de component :
export interface OverridableComponent<M extends OverridableTypeMap> { <C extends React.ElementType>( props: { /** * The component used for the root node. * Either a string to use a HTML element or a component. */ component: C; } & OverrideProps<M, C>, ): JSX.Element; (props: DefaultComponentProps<M>): JSX.Element; } Entonces, puede usar FormControl de manera segura de esta manera: <FormControl component={...} /> , pero envolviéndolo en otro componente, como este:
interface ICustomControlProps { gridProps?: GridProps; formControlProps?: FormControlProps; } const CustomControl = (props: ICustomControlProps) => { return ( <Grid {...props.gridProps}> <FormControl {...props.formControlProps} /> </Grid> ); }; requerirá que especifique que también se permite un accesorio de component en ICustomControlProps.formControlProps :
interface ICustomControlProps { gridProps?: GridProps; formControlProps?: FormControlProps & { component: React.ElementType }; }En cuanto a por qué esto funciona:
formControlProps={{ ...{ component: "fieldset", ...props.formControlProps } }} la respuesta parece estar en este problema , más específicamente en este comentario , que dice que ... crea un subtipo , por lo que todo es válido.