简体   繁体   中英

How do I export a TypeScript React component which uses Material-UI withStyles?

I have a React component written in TypeScript which applies the Material-UI style to react-select as shown below.

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);

How can I modify this so that it's exported as a parameterized type so can be used as

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

rather than

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

This is unfortunately not an issue with material-ui specifically but higher-order components in general. When using a higher-order component your're losing all generic type information of the wrapped component.

You should be able to observe the same issues with connect from react-redux or styled from styled-components .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM