React App.tsx has 'not assignable' error using withStyles

Viewed 130

I started a default Webapp using React (Typescript) and Material-UI.

I tried to implement the following code as class commponents. If I don't change the code and use it like in the example it is working, but I would like to create a class component instead of a function: https://material-ui.com/components/drawers/#MiniDrawer.tsx

My implementation: App.tsx

const styles = (theme: Theme) => createStyles({
  // ...
});

interface Props extends WithStyles<typeof styles> {
}

interface State {
  open: boolean;
}


class App extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    
    this.state = {
      open: false
    };
  }

  ...

  public render(): JSX.Element {
    const { classes } = this.props;

    return (
       ...
    );
  }
}


export default withStyles(styles)(App);

After using my code I get the following error.

TypeScript error in D:/project/src/index.tsx(10,8):
Type '{}' is not assignable to type '(value: JSSFontface, index: number, array: JSSFontface[]) => unknown'.
  Type '{}' provides no match for the signature '(value: JSSFontface, index: number, array: JSSFontface[]): unknown'.  TS2322

     8 | ReactDOM.render(
     9 |   <React.StrictMode>
  > 10 |       <App />
       |        ^
    11 |   </React.StrictMode>,
    12 |   document.getElementById('root')
    13 | );

enter image description here

0 Answers
Related