展开时隐藏在浏览器书签栏后面的部分 MUI Accordion答案

【问题标题】：Portion of MUI Accordion hidden behind browser bookmark bar when expanded展开时隐藏在浏览器书签栏后面的部分 MUI Accordion
【发布时间】：2022-06-22 21:12:10
【问题描述】：

我在 appBar 中使用 MUI 手风琴。当我展开手风琴时，它会向上移动一点，导致手风琴的标题隐藏在浏览器书签栏的后面。有什么方法可以防止这种情况发生吗？

const useStyles = makeStyles((theme)) => {
    appBar: {
        borderBottom: "2px solid #D2D2D2",
        backgroundColor: "#fff",
        marginTop: "0px",
        height: "2.8vw",
    },
    appBarAcc: {
        // display: "flex", // Causes the accordion to expand horizontally
        flexDirection: "column",
        width: "auto",
        // padding: "0.8vw 0.4vw",
        "&:hover": {
            backgroundColor: "#B6B6B6",
        },
    },
}
...
                    <AppBar position="static" className={classes.appBar} elevation={0}>
                        <Toolbar variant="dense">
                            <Accordion className={classes.appBarAcc} elevation={0} TransitionProps={{ unmountOnExit: true }}>
                                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
                                    <NotificationsNoneIcon
                                        style={{ color: "#636363", marginRight: "0.4vw", fontSize: "large", justifyContent: "center" }}
                                    />
                                    <Typography>Notifications</Typography>
                                </AccordionSummary>
                                <AccordionDetails>
                                    <Typography>No notifications</Typography>
                                </AccordionDetails>
                            </Accordion>
                        </Toolbar>
                    </AppBar>

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

它向上移动，因为它是 flex 和 align-items: center 的 Toolbar 元素的子元素。
所以你应该将 Toolbar 的样式更改为 align-items: flex-start；

const useStyles = makeStyles((theme)) => {
   ...styles,
   toolbar: {
      alignItems: "flex-start"
  }
}

<Toolbar variant="dense" className={classes.toolbar}>
   {children}
</Toolbar>

【讨论】：