切换后，材质UI应用程序栏组件的菜单不会显示

Question

我正在使用Material-UI中的App Bar和Drawer Components。每当我点击App Bar中的汉堡菜单时抽屉都会切换。但我的汉堡图标就像完全覆盖了。因此，如果我想要我的抽屉菜单切换出来，我必须刷新页面。我的组件如下：

App.js

class App extends Component {
render() {
return (
  <MuiThemeProvider>
    <div className="App">
      <AppBarComponent />


     </div>
   </MuiThemeProvider>
  );
 }
}

AppBarComponent.js

  class AppBarComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = { open: false };
  }

  handleToggle = () => this.setState({ open: !this.state.open });

  render() {
    return (
      <div>
        <AppBar title="App Bar Title"
          iconClassNameRight="muidocs-icon-navigation-expand-more"
          onLeftIconButtonClick={this.handleToggle}
        />
        <Drawer open={this.state.open}>
          <MenuItem>Menu Item 1</MenuItem>
          <MenuItem>Menu Item 2</MenuItem>
          </Drawer>
      </div>
    );
  }
};

export default AppBarComponent;

每当我点击汉堡包菜单时，抽屉切换为：

我们可以看到汉堡包菜单是完整的。如何使App Bar组件响应？我是否必须手动编写css类，或者有什么方法可以调整它吗？

Answer 1

可能的一个解决方案是，您可以在右侧切换抽屉。 在Drawer组件中可以使用openSecondary属性，你可以使它布尔值为true以从左侧切换。

Answer 2

您可以将抽屉的z-index设置为低于AppBar的z-index。将AppBar位置更改为绝对位置，将抽屉更改为相对位置。可能必须使用填充物，但不会受伤。