reactjs - Material UI Typescript - createStyles-problem

Jag har följande testkod (följande guiden i Material UI TypeScript-dokumentationen)

import * as React from 'react';

import { Theme } from '@material-ui/core/styles/createMuiTheme';
import { WithStyles } from '@material-ui/core';
import { createStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';

const drawerWidth = 240;

const styles = (theme: Theme) => createStyles({
  root: {
    flexGrow: 1,
    height: 430,
    zIndex: 1,
    overflow: 'hidden',
    position: 'relative',
    display: 'flex',
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  drawerPaper: {
    position: 'relative',
    width: drawerWidth,
  },
  content: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing.unit * 3,
    minWidth: 0,
  },
  toolbar: theme.mixins.toolbar,
});

interface Props extends WithStyles<typeof styles> {}
interface State {}

export class Sidebar extends React.Component<Props, State> {
  render() {
    const { classes } = this.props;
    return (
      <Drawer
        style={{position: 'relative', width: drawerWidth}}
        variant='permanent'
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <div className={classes.toolbar} />
      </Drawer>
    );
  }
}

export default Sidebar;

Nu, om jag försöker använda denna komponent någon annanstans genom att göra:

import * as React from 'react';

import Grid from '@material-ui/core/Grid';

import Sidebar from './Sidebar';


export class Main extends React.Component {
  public render() {
    return (
      <Grid container>
        <Grid container item xs={12}>
          <Sidebar />
        </Grid>
      </Grid>
    );
  }
}

export default Main;

Jag får felmeddelandet att classes saknas inom Main-komponenten och cannot read property drawerPaper of undefined inom SideBar-komponenten. Jag antog att extend WithStyles<typeof styles> skulle lösa problemet men det hjälper fortfarande inte när jag försöker importera och använda SideBar-komponenten. Jag har mycket lite erfarenhet av Material UI-teman så all vägledning skulle vara oerhört uppskattad.

Svar #1

Du har inte kopplat dina stilar till komponenten. Det finns ingen koppling i din kod mellan de stilar du skapade och resten av koden.

För att göra det behöver du använda HOC withStyles. Istället för export default Sidebar; gör bara export default withStyles(styles)(Sidebar);