I'm using:
- "@material-ui/core": "3.5.1",
- "react": "16.4.0",
- "typescript": "2.6.1"
I'm trying to replicate the material-ui demo for SimpleListMenu, but I've got one last compile error and I don't know what to do about it.
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
I get this error:
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'.
I've tried many things to get to this down to one error. I mostly followed this guy's example. Anyone got some insight?
ETA: I tried compiling the code that was in the stackoverflow question, and I get the same compile error as I get for mine. I have also tried almost every example in Typescript type error in component returned by withStyles() , and I get the same typescript error. So it must have something to do with my installation?