css - 如何从一个小部分的 material-ui AppBar 中删除高程(框阴影)？

Question

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

我正在为我的 NavBar 组件使用 Material-UI 的 AppBar。

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 的高度/阴影，只是它位于侧边栏上方的左侧部分。

Answer 1

你可以添加一个 ::after伪元素到您的 navbar做这项工作。此元素将具有侧边栏的宽度，并且具有 top属性(property)根据您的 navbar .
鉴于 AppBar本身有一些不同的断点，您需要更改 top因此:

const useStyles = makeStyles((theme) => ({
  root: {
    "&::after": {
      position: "absolute",
      content: '""',
      width: "70px",
      height: "8px",
      top: "48px",
      backgroundColor: theme.palette.primary.main,
      [theme.breakpoints.down("xs")]: {
        top: "56px"
      },
      "@media (orientation: landscape)": {
        top: "48px"
      },
      [theme.breakpoints.up("sm")]: {
        top: "64px"
      }
    }
  }
}));

export default function NavBar() {
  const classes = useStyles();

  return (
    <div>
      <AppBar classes={{ root: classes.root }} position="fixed" elevation={4}>
        <Toolbar variant="regular">
          <IconButton edge="start" color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
    </div>
  );
}

我创建了一个只有导航栏的沙箱，还有一个更暗的阴影来增强对比度: