Question

我试图在我的Gatsby项目中使用Material UI，但是语法完全不同，我想了解这种情况下发生的情况。

我正在尝试将useStyles传递给标头组件，并尝试了许多不同的方法，阅读了gatsby和对文档进行反应，但我遇到了麻烦。

非常感谢您对两者之间的区别进行解释

const {classes} = useStyles();
const {classes} = useStyles

以及组件中需要return（）表示法

我还需要将useStyles传递给函数吗？

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

const Header = ({ siteTitle }) => {
  const {classes} = useStyles

  return classes (
    <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}>
            {siteTitle}
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

Answer 1

关于第一个问题-useStyles是一个返回对象的函数。如果您希望能够使用该对象（并且想要使用它，这就是使用它的方式）-您需要调用该函数。

如果您使用const {classes} = useStyles-这没有任何意义，因为您的classes引用（是对函数的引用）中没有useStyles实体。

一旦调用useStyles函数并将其值放在classes常量中，就可以使用classes.CLASS_NAME（最终会使用您编写的样式值创建一个生成的类名，基于makeStyles定义。

在您的示例中-classes.title将创建一个值为makeStyles-root-1的新类（假设名称为flex-grow: 1）。
如果它是一个css文件，它将看起来像这样：

.makeStyles-root-1 {
    flex-grow: 1;
}

在您的react组件内部，您可以像这样使用它：

<div className="makeStyles-root-1">...</div>

相反-您可以在javascript代码中轻松参考该特定样式。

关于您的代码-它应如下所示：

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

const Header = ({ siteTitle }) => {
  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}>
            {siteTitle}
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

如何通过Gatsby在Material UI中使用useStyles和makeStyles

1 个答案: