Question

我希望我的抽屉组件在AppBar组件下打开而不覆盖它。但这对于@ Material-Ui / core的新版本从来没有担心过。

我该怎么做？

当前，它以覆盖AppBar的方式打开。那不是我想要的，我希望抽屉像任何普通应用一样在appBar组件下打开。

这是我的代码：

const styles = theme => ({


root: {
    flexGrow: 1,
  },
  flex: {
    flex: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  list: {
      width: 250,
  },

});


class ClippedDrawer extends React.Component {
  constructor(props){
    super(props);
    this.state={
     open: false,     
    }
  }

  toggleDrawer(){
    this.setState({
      open: !this.state.open,
    });
  };

  render(){
    const { classes } = this.props;
    return(
        <div className={classes.root}>
          <AppBar position="relative" className={classes.appBar}>
            <Toolbar>
              <IconButton className={classes.menuButton} onClick={()=>this.toggleDrawer()} color="inherit" aria-label="Menu">
                <MenuIcon />
              </IconButton>
              <Typography variant="title" color="inherit" className={classes.flex}>
                Title
              </Typography>
              <Button color="inherit">Login</Button>
            </Toolbar>
          </AppBar>
          <Drawer className={classes.drawer} open={this.state.open} onClose={()=>this.toggleDrawer()}>
          <div
            tabIndex={0}
            role="button"
            onClick={()=>this.toggleDrawer()}
            onKeyDown={()=>this.toggleDrawer()}
          >
            <div className={classes.list}>
              <List>ola</List>
              <Divider />
              <List>xau</List>
            </div>
          </div>
        </Drawer>
        </div>
      );
    }
  }


ClippedDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ClippedDrawer);

Answer 1

对我来说，向AppBar添加位置道具可以解决此问题。例如

<AppBar position="fixed" className={classes.appBar}>
</AppBar>

Answer 2

您可以在样式中将应用栏的位置设置为绝对位置，并在抽屉中放置边距以使其位于正确的位置。

但是请检查文档，那里有很多示例https://material-ui.com/demos/drawers/

Answer 3

将AppBar的位置设置为相对位置：

appBar: {
    ...
    position: 'relative',
    zIndex: theme.zIndex.drawer + 1,
},

如果它不起作用，则可能还需要将zIndex显式设置为1400。

Answer 4

您将必须为样式中的appBar类设置CSS z-index属性

    [theme.breakpoints.up("sm")]: {
      width: "100%"
    },
    zIndex: theme.zIndex.drawer + 1
  }

此AppBar类是AppBar组件的默认类在您的情况下，appBar和theme.breakpoints.up（“ sm”）的宽度可能为calc(100% - (drawerWidth)) 换成宽度100％

希望这会有所帮助

Answer 5

对于正在寻找解决这个非常烦人的问题（标题覆盖抽屉的一部分）的其他任何人，这是我的解决方案（与 zIndex 一起），用于具有非固定标题的抽屉：

在标题下方放置一个带有 useRef() 的空 div，然后在单击按钮时使用 ref.current.getBoundingClientRect().top，并将其传递到您的抽屉样式中用于 paddingTop。

这会获取按钮被点击时屏幕顶部到 div 的像素距离，因此抽屉将始终具有正确的填充。

Answer 6

我在使用 Material-UI 的“下一个”（v5）版本时也遇到了这个问题。我查看了 the example of a drawer clipped under the app bar in the next version's documentation 并且示例和我自己的代码之间几乎没有区别。为我解决此问题的是在我的应用组件周围使用 StyledEngineProvider。当我使用它时，我的抽屉立即隐藏在应用栏下方。

import * as React from 'react';
import ReactDOM from 'react-dom';
import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
import App from './App';

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <App />
  </StyledEngineProvider>,
  document.querySelector("#root")
);

Answer 7

在你的 Drawer 组件类中，在纸中：{ background: "transparent" } 然后无论你在抽屉中的内容是什么，用 Material-UI 包装它，设置它的样式，以便它可以向下移动 #像素作为您的 appBar 的高度。然后相应地设置样式。 :)

抽屉覆盖了Material-UI中的AppBar

7 个答案: