问尝试使用material-ui withStyles时出现Typescript编译错误

EN

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import {StyleRulesCallback, Theme, WithStyles} from "@material-ui/core";
import withStyles from "@material-ui/core/styles/withStyles";

const styles: StyleRulesCallback<"root"> = (theme: Theme) => ({
root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
},
});

const options = [
'Show some love to Material-UI',
'Show all notification content',
'Hide sensitive notification content',
'Hide all notification content',
];

type Props = WithStyles<typeof styles> & {
classes: {
    root: string
}
};

type State = {
anchorEl: EventTarget & HTMLElement | null
selectedIndex: number
};

class SimpleListMenu extends React.Component<Props, State> {
state = {
    anchorEl: null,
    selectedIndex: 1,
};

handleClickListItem = (event: React.MouseEvent<HTMLElement>) => {
    this.setState({ anchorEl: event.currentTarget });
};

handleMenuItemClick = (event: React.MouseEvent<HTMLElement>, index: number) => {
    this.setState({ selectedIndex: index, anchorEl: null });
};

handleClose = () => {
    this.setState({ anchorEl: null });
};

render() {
    const { anchorEl } = this.state;

    return (
    <div className={this.props.classes.root}>
        <List component="nav">
        <ListItem
            button
            aria-haspopup="true"
            aria-controls="lock-menu"
            aria-label="When device is locked"
            onClick={this.handleClickListItem}
        >
            <ListItemText
            primary="When device is locked"
            secondary={options[this.state.selectedIndex]}
            />
        </ListItem>
        </List>
        <Menu
        id="lock-menu"
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={this.handleClose}
        >
        {options.map((option, index) => (
            <MenuItem
            key={option}
            disabled={index === 0}
            selected={index === this.state.selectedIndex}
            onClick={event => this.handleMenuItemClick(event, index)}
            >
            {option}
            </MenuItem>
        ))}
        </Menu>
    </div>
    );
}
}
export default withStyles(styles, {withTheme: true })<Props>(SimpleListMenu); // Compile error here

TS2344: Type 'Props' does not satisfy the constraint 'ComponentType<ConsistentWith<Props, boolean>>'. 
 Type 'Props' is not assignable to type 'StatelessComponent<ConsistentWith<Props, boolean>>'.
  Type 'Props' provides no match for the signature '(props: ConsistentWith<Props, boolean> & {children? ReactNode;}, context?: any): ReactElement<any> | null'.