Material UI App Bar 组件的菜单在切换后不显示答案

【问题标题】：Material UI App Bar Component's menu does not show up after toggleMaterial UI App Bar 组件的菜单在切换后不显示
【发布时间】：2018-09-17 22:36:05
【问题描述】：

我正在使用 Material-UI 中的 App Bar 和 Drawer 组件。每当我点击应用栏中的汉堡菜单时，抽屉就会切换。但是我的汉堡包图标就像完全被覆盖了一样。所以如果我想让我的抽屉菜单切换出来，我必须刷新页面。我的组件如下：

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 类还是有什么方法可以调整它？

【问题讨论】：

标签： reactjs responsive-design frontend material-ui

【解决方案1】：

可能的一种解决方案是，您可以切换右侧的抽屉。 Drawer 组件中提供 openSecondary 属性，您可以将其设为布尔值 true 以从左侧切换。

【讨论】：

openSecondary 属性只是切换右侧的 Drawer 组件。我的问题是如何在不覆盖默认一侧的汉堡菜单的情况下切换它。

【解决方案2】：

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

【讨论】：