时间戳

首页 > 解决方案 > 材料 UI：无法让 useStyles 在类组件中工作

javascript - 材料 UI：无法让 useStyles 在类组件中工作

问题描述

我正在尝试从我的 Class 组件中访问 useStyles，但我不断收到：

TypeError：无法读取未定义的属性“根”

这是 Materials UI 提供的：useStyles：

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));


export default function ButtonAppBar() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

在他们的示例中，他们在函数中调用了 useStyles()。但是，这不适用于课程。

根据我从研究中得出的结论，这就是我所拥有的：

const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
  }));

export default class Navbar extends React.Component {
    render() {
        const {classes} = this.props;
        return(
            <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
        )
    }
}

标签： javascriptreactjsmaterial-ui

解决方案

由于makeStyles返回一个钩子，您可以在功能组件中调用它。这种创建类的方法在类组件中不起作用。相反，您需要使用withStyles-- 一个可以包裹在 Class 组件周围的 HOC。

例子：

class MyComponent extends React.Component {
  render() {
    const { classes } = this.props
    return (
      <div className={classes.container}>
        ...
      </div>
    )
  }
}
const ≈ = withStyles({
  container: { background: 'red' })
})(MyComponent)

export default ComponentWithClasses

https://material-ui.com/styles/advanced/#withstyles

推荐阅读