时间戳

首页 > 解决方案 > 如何从 material-ui AppBar 的一小部分上删除高程（框阴影）？

css - 如何从 material-ui AppBar 的一小部分上删除高程（框阴影）？

问题描述

我试图摆脱导航栏在侧边栏上的高度阴影。

在此处输入图像描述

我将 Material-UI 的 AppBar 用于我的 NavBar 组件。

export default function NavBar() {
  return (
    <div>
      <AppBar position="fixed" elevation={4}>
        <Toolbar variant="regular">
          <IconButton edge="start" color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
    </div>
  );
}

我正在使用自定义侧边栏组件，

.sidebar {
  left: 0;
  top: 64px;
  height: 100vh;
  width: 70px;
  background-color: #3f50b5;
  position: fixed;
}

.sidebar::before{
  display: none;
}

我不想丢失整个 NavBar 的高度/阴影，只是它位于侧边栏上方的左侧部分。

标签： cssreactjsmaterial-uijsx

解决方案

添加这个是因为我花了很多时间寻找一个简单的答案来消除海拔。

移除阴影最简单的方法是elevation在AppBar.

<AppBar position="fixed" elevation={0}>

推荐阅读