MUI Accordion在AppBar内展开时被浏览器书签栏遮挡如何解决

出现向上偏移、被书签栏遮挡是几个问题共同导致的：

• 你给AppBar设置了固定高度height: "2.8vw"，Accordion展开时总高度会超过这个固定值，父容器高度被锁死时，内部组件的布局计算会出现错位
• position="static"的AppBar不会创建独立层叠上下文，Accordion展开的溢出内容会直接相对于视口定位，直接顶到页面最顶部被书签栏遮挡
• 你贴的代码里makeStyles存在语法错误：const useStyles = makeStyles((theme)) => { 这一行参数部分多了一个闭合括号，正确写法是const useStyles = makeStyles((theme) => {，语法错误会导致样式加载异常，也可能引发布局错位。

按优先级依次调整即可：

• 第一步：把AppBar的固定高度改为最小高度，让父容器自适应内容高度
  把appBar样式里的height: "2.8vw"替换为minHeight: "2.8vw"，父容器会自动适配Accordion展开后的高度，不会把内容挤压错位：

  appBar: {
      borderBottom: "2px solid #D2D2D2",
      backgroundColor: "#fff",
      marginTop: "0px",
      minHeight: "2.8vw",
  },
  

• 第二步：给Accordion加布局约束，消除默认边距带来的偏移
  先给appBarAcc类补两个定位和对齐属性，让Accordion在Toolbar的flex布局里固定对齐位置，不会向上偏移：

  appBarAcc: {
      flexDirection: "column",
      width: "auto",
      position: "relative",
      alignSelf: "flex-start",
      "&:hover": {
          backgroundColor: "#B6B6B6",
      },
  }
  

  再给Accordion组件加disableGutters属性，去掉MUI默认给Accordion加的上下外边距，避免默认边距带来的位置偏移：

  <Accordion 
    className={classes.appBarAcc} 
    elevation={0} 
    disableGutters
    TransitionProps={{ unmountOnExit: true }}
  >
  

• 可选方案：如果必须保留AppBar的固定高度，就强制展开内容在标题下方渲染
  如果你有特殊需求不能改AppBar的固定高度，直接给Accordion的详情区域加绝对定位，强制内容在标题正下方弹出，不会向上窜：

  appBarAcc: {
      // 保留原有样式
      position: "relative",
      "& .MuiAccordionDetails-root": {
          position: "absolute",
          top: "100%",
          left: 0,
          right: 0,
          zIndex: 1200,
          backgroundColor: "#fff",
          border: "1px solid #D2D2D2"
      }
  }
  

注意：不要用硬编码marginTop的方式凑偏移量，不同设备、不同浏览器下书签栏高度、显示状态都不一致，硬编码的数值很容易在其他场景下再次出现错位。

内容的提问来源于stack exchange，提问作者Ciaran Crowley