如何使用 Typescript 为自定义 PopperComponent 输入 material ui 道具

Question

我在我的 React 和 typescript 应用程序中使用 Material ui autocomplete。

我需要定义一个自定义 popper 组件，因为我想让 popper 全角。

下面是我如何做到的：

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

然后在我的 Autocomplete 中，我可以像这样使用它：

<Autocomplete PopperComponent={CustomPopper} />

我收到 Typescript 错误 Parameter 'props' implicitly has an 'any' type. 我该如何解决这个问题？我无法使用 props: any 因为我的 EsLint 设置。

Answer 1

您仍然需要 customPopper 组件中 props 的类型。

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

您应该能够扩展 PopperProps 以添加您的 CustomPopper 组件可能需要的任何其他道具。像这样：

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

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

How type material ui props for custom PopperComponent with Typescript