2

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?

1 Answer 1

1

Try following the typing pattern from https://material-ui.com/guides/typescript/

Especially

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

does not follow the recommendations.

A working example of the menu demos can be found on https://next--material-ui.netlify.com/demos/menus/#selected-menus (click show source, then switch to TS)

Sign up to request clarification or add additional context in comments.

6 Comments

I had gone over the typescript guide, but I was running into compilation problems. As with the menu demo code, I have a problem with this line: interface Props extends WithStyles<typeof styles> {}. My compiler complains: An interface may only extend a class or another interface.
Something is off. WithStyles is exported as an interface. I would need to see your project setup (package.json, tsconfig.json and complete file) to know what's wrong.
In my file @material-ui/core/styles/withStyles.ds, the WithStyles definition is like: export type WithStyles<, so it's a type.
I just went through the releases and WithStyles hasn't been an interface since v1.1.0. It somehow got changed to type in v1.2.0.
This shouldn't matter. Might be an issue with older typescript version. Could you try upgrading to 2.9 or preferably 3.1?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.