How type material ui props for custom PopperComponent with Typescript

Question

I am using Material ui autocomplete in my React and typescript app.

I need to define a custom popper component because I want to make the popper full-width.

Below is how I can do that:

const CustomPopper = (props) => {
    return <Popper {...props} css={styles.popper} placement="bottom-start" />;

Then in my Autocomplete I can use it like:

<Autocomplete PopperComponent={CustomPopper} />

I get a Typescript error Parameter 'props' implicitly has an 'any' type. How could I fix this? I can't use props: any because my EsLint setup.

Answer 1

You still need a type for the props in the customPopper component.

const CustomPopper = (props: PopperProps) => { 
    return <Popper {...props} css={styles.popper} placement="bottom-start" />;
}

You should be able to extend the PopperProps to add whatever other props you may need for your CustomPopper component. Something like this:

type MyCustomPopperProps = {
   someCustomProp: string;
} & PopperProps;

const CustomPopper = (props: MyCustomPopperProps) => {  }