如何消除Material-UI中两个堆叠AppBar之间的分隔线？

你遇到的这个问题是因为Material-UI的AppBar默认带有elevation（阴影/边框效果），顶部AppBar的阴影层级会覆盖在下方的AppBar之上。下面给你两种实用的解决办法：

方法一：移除顶部AppBar的阴影 #

直接给第一个AppBar设置elevation={0}，这样就不会生成底部的线条/阴影了，两个AppBar可以无缝堆叠：

import { AppBar, Toolbar, Typography } from '@mui/material';

function StackedAppBars() {
  return (
    <>
      <AppBar position="static" elevation={0}>
        <Toolbar>
          <Typography variant="h6">顶部导航栏</Typography>
        </Toolbar>
      </AppBar>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6">底部导航栏</Typography>
        </Toolbar>
      </AppBar>
    </>
  );
}

export default StackedAppBars;

方法二：提升底部AppBar的层级 #

如果想保留顶部AppBar的阴影效果，可以通过调整底部AppBar的z-index，让它的层级高于顶部的阴影：

import { AppBar, Toolbar, Typography, useTheme } from '@mui/material';

function StackedAppBars() {
  const theme = useTheme();
  return (
    <>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6">顶部导航栏</Typography>
        </Toolbar>
      </AppBar>
      <AppBar 
        position="static" 
        sx={{ zIndex: theme.zIndex.appBar + 1 }}
      >
        <Toolbar>
          <Typography variant="h6">底部导航栏</Typography>
        </Toolbar>
      </AppBar>
    </>
  );
}

export default StackedAppBars;

这两种方法都能解决线条覆盖的问题，你可以根据自己的视觉需求选择其中一种。

内容的提问来源于stack exchange，提问作者Gabriel Rizan