У меня есть стилизованный компонент, определяемый withStyles
из material-ui
. Я использую typescript
, поэтому он жалуется на ошибку типа в последней строке. Причина в том, что для компонента ServiceListComponent
требуется classes
и services
, но withStyles
обеспечивает только classes
. services
будет предоставлено от родительского компонента. Как я могу сделать правильный тип в операторе withStyle
?
const styles = createStyles({...})
interface Props {
services: RootState.ServicesState;
classes: { [className in keyof typeof styles]: string };
}
const ServiceListComponent = ({ classes, services }: Props) => {
return (
<Grid container className={classes.root}>
<Grid container className={classes.parent} spacing={8}>
{itemsArray.map(value => (
<Grid key={value} item className={classes.item} xs={4} sm={4} md={3} xl={4}>
<Paper className={classes.paper} />
</Grid>
))}
</Grid>
</Grid>
);
};
ServiceListComponent.propTypes = {
classes: PropTypes.object.isRequired,
};
export const ServiceList = withStyles(styles)(ServiceListComponent);
Ошибка для вышеуказанного кода в последней строке:
TS2345: Argument of type '{ ({ classes, services }: Props): Element; propTypes: { classes: Validator<object>; }; }' is not assignable to parameter of type 'ComponentType<ConsistentWith<Props, { classes: Record<"root" | "parent" | "paper" | "items" | "item", string>; }>>'.
Type '{ ({ classes, services }: Props): Element; propTypes: { classes: Validator<object>; }; }' is not assignable to type 'FunctionComponent<ConsistentWith<Props, { classes: Record<"root" | "parent" | "paper" | "items" | "item", string>; }>>'.
Types of property 'propTypes' are incompatible.
Type '{ classes: Validator<object>; }' is not assignable to type 'WeakValidationMap<ConsistentWith<Props, { classes: Record<"root" | "parent" | "paper" | "items" | "item", string>; }>>'.
Types of property 'classes' are incompatible.
Type 'Validator<object>' is not assignable to type 'Validator<{ root: string; parent: string; paper: string; items: string; item: string; }>'.
Type '{}' is missing the following properties from type '{ root: string; parent: string; paper: string; items: string; item: string; }': root, parent, paper, items, item
Я могу исправить это, добавив any
, как показано ниже, но я не хочу его использовать.
export const ServiceList = withStyles(styles)<any>(ServiceListComponent);