Reactjs 如何与Gatsby一起使用材质UI中的useStyles和makeStyles

我试图在我的盖茨比项目中使用MaterialUI，但是语法完全不同，我想了解这个场景中发生了什么

我试图将useStyles传递给我的标题组件，并尝试了大量不同的方法，阅读了盖茨比和react文档，但我遇到了麻烦

如果能解释一下两者之间的区别，我将不胜感激

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

const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
},
菜单按钮：{
边缘光：主题。间距（2），
},
标题：{
flexGrow:1，
},
}));
常量头=（{sitetTitle}）=>{
常量{classes}=useStyles
返回类(
{siteTitle}
登录
);
}
Header.propTypes={
siteTitle:PropTypes.string，
}
Header.defaultProps={
网站名称：``，
}
导出默认标题

关于第一个问题-

useStyles

是一个返回对象的函数。如果您希望能够使用该对象（并且您希望，这是使用该对象的方式），则需要调用该函数

如果您执行

const{classes}=useStyles

-这没有任何意义，因为

useStyles

引用（对函数的引用）中没有

classes

实体

调用

useStyles

函数并将其值放入

classes

const中后，就可以使用

classes.CLASS\u NAME

（它最终会根据

makeStyles

定义，使用您编写的样式值创建生成的类名）

在您的示例中-

classes.title

将创建一个值为

flex-grow:1

的新类（假设名称为

makeStyles-root-1

） 如果是css文件，它将如下所示：

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

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

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

在react组件中，您可以这样使用它：

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

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

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

。。。

相反，您可以在javascript代码中轻松引用该特定样式

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

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

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

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

const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
},
菜单按钮：{
边缘光：主题。间距（2），
},
标题：{
flexGrow:1，
},
}));
常量头=（{sitetTitle}）=>{
const classes=useStyles（）；
返回(
{siteTitle}
登录
);
}
Header.propTypes={
siteTitle:PropTypes.string，
}
Header.defaultProps={
网站名称：``，
}
导出默认标题