reactjs - Material UI Typescript - createStyles 问题

Question

我有以下测试代码(遵循 Material UI typescript 文档中的指南)

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;

现在，如果我通过以下方式尝试在其他地方使用此组件:

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;

我得到的错误是 classes在主要组件和 cannot read property drawerPaper of undefined 中丢失在 SideBar 组件中。我假设 extend WithStyles<typeof styles>可以解决该问题，但在尝试导入和使用 SideBar 时仍然无济于事成分。我对 Material UI 主题的经验很少，因此非常感谢任何指导。

Answer 1

您还没有将样式附加到组件。在您的代码中，您创建的样式与其余代码之间没有任何联系。

为此，您需要使用 HOC withStyles。而不是 export default Sidebar; 只是 export default withStyles(styles)(Sidebar);