如何在 TypeScript 中使用 Material-UI with MobileDialog HOC？

Question

我在 TypeScript 中使用 withMobileDialog 时遇到问题。

这是我的代码，基于代码示例 in the docs。

import withMobileDialog, { InjectedProps } from "@material-ui/core/withMobileDialog";

class MyComponent extends React.Component<
  MyComponentProps & InjectedProps, MyComponentState> { 
    ... 
}

export default withMobileDialog()(MyComponent);

我收到此错误：

Argument of type 'typeof MyComponent' is not assignable to parameter of type 'ComponentType<InjectedProps & Partial<WithWidth>>'.
  Type 'typeof MyComponent' is not assignable to type 'ComponentClass<InjectedProps & Partial<WithWidth>, any>'.
    Types of parameters 'props' and 'props' are incompatible. ts(2345)

我在这里做错了什么？提前致谢！

Answer 1

这是@material-ui/core 类型的问题。我们还注入了一个width 属性。以下代码应该通过：

import { WithWidth } from "@material-ui/core/withWidth";
import withMobileDialog, { InjectedProps } from "@material-ui/core/withMobileDialog";

class MyComponent extends React.Component<
  MyComponentProps & InjectedProps & Partial<WithWidth>, MyComponentState> { 
    ... 
}

export default withMobileDialog()(MyComponent);