Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Why does property spreading work inside Grid but not in FormControl?

$
0
0

Sandbox here: 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      }}    />  );};

Update

Note that adding another level of spreading for FormControl works:

<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        }      }}    />

Here is the sandbox for this code.

I find both approaches logically correct and in my opinion, both should work, but I don't understand why the first one is giving an error.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>