Javascript 如何在页眉下方放置抽屉

我是react的新手，我在代码中使用样式来更改抽屉的样式

const useStyles = makeStyles((theme) => ({
   drawer: {
       marginTop: 56,
   }
}));
class PageMenu extends React.Component {
GetMenuItems() {
var classes = useStyle();
<div>
   <Drawer
      open={this.props.DrawerOpen}
      anchor="right"
      variant="persistent"
      onClose={this.fixthew}
      classes = {classes.drawer}
   >
      ---some element------
   </Drawer>
<\div>
}
}
render() {
  return(
     <div>
        {GetMenuItems}
     </div>
  )
}

问题是ReferenceError:未定义useStyle，并且GetMenuItems应在渲染之前使用。对于类组件，请使用withStyles而不是makeStyles。

许多错误：

您正在类中使用useStyles钩子组件钩子仅用于功能组件。。 您正在将组件定义为类methud中的一个。。。你不应该这样做。。 在类属性中传递类，而不是在类名称属性中传递类 而是使用如下功能组件：

function MenuItems(){
    var classes = useStyle();
    return <div>
       <Drawer
          open={this.props.DrawerOpen}
          anchor="right"
          variant="persistent"
          onClose={this.fixthew}
          className = {classes.drawer}
       >
          ---some element------
       </Drawer>
    <\div>
}


function PageMenu(){
    return(
         <div>
            <MenuItems/>
         </div>
    )
}

如果你是一个初学者，我可以建议你使用带有钩子的函数组件并学习它们之间的区别。。。

---

此外，Material Ui是一个很难使用的库，您最好了解该库中的自定义设置以及它们提供的设置组件样式的方法。。。但是有很多问题。

这是我的主要问题var classes=useStyle；我将makeStyles改为withStyles，但仍然没有定义。您必须从“@material ui/core/styles”导入{makeStyles}；我应该如何更改类组件中材质ui的样式？按照Nazeer所说的样式。。。你只需要查看文档中的内容，看看如何正确地执行。。。不管怎么说，我已经向你指出了错误，因此它可以帮助你…你已经在顶部定义了useStyles，但你正在将其用作useStyle。字母“s”丢失了，为什么会出现引用错误。您定义GetMenuItems的方式和在渲染中引用的方式都是错误的。如果要将其用作PageMenu类的属性，则命名应为getMenuItems。将其与PageMenu类绑定，然后将其用作{this.getMenuItems}，或者将getMenuItems创建为单独的功能组件，然后使用它，因为您没有给出接受任何答案的反馈