如何导出使用 Material-UI withStyles 的 TypeScript React 组件？

Question

我有一个用 TypeScript 编写的 React 组件，它将 Material-UI 样式应用于 react-select，如下所示。

const styles = (theme: Theme) => createStyles({
});

export interface Props<TI> extends WithStyles<typeof styles, true> {
    innerProps: Partial<AsyncSelectProps<TI>>;
    selectRef?: React.RefObject<StateManager<TI>>;
    onSelectionChange?: (selection: TI | undefined) => void;
}

class MaterialReactSelect<TI> extends React.PureComponent<Props<TI>> {
    ...
}

export default withStyles(styles, {withTheme: true})(MaterialReactSelect);

我如何修改它，以便将其导出为参数化类型，以便用作

<MaterialReactSelect<string>
    selectRef={this.selectRef}
    onSelectionChange={this.onSelectionChange}
    innerProps={innerProps}
/>

而不是

<MaterialReactSelect
    selectRef={this.selectRef}
    onSelectionChange={this.onSelectionChange}
    innerProps={innerProps}
/>

Answer 1

不幸的是，这不是 material-ui 的问题，而是一般的高阶组件。使用高阶组件时，您将丢失被包装组件的所有泛型类型信息。

您应该能够从react-redux 或styled 从styled-components 观察到相同的问题。