如何从一个小部分的材质 UI AppBar 中删除高程（框阴影）？

Posted 2023-02-22

【中文标题】如何从一个小部分的材质 UI AppBar 中删除高程（框阴影）？

【英文标题】：How can I remove the elevation (box shadow) from a material-ui AppBar over one small section?

【发布时间】：2021-06-10 00:30:10

【问题描述】：

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

我正在为我的 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 的高度/阴影，只是在侧边栏上方的左侧部分。

【参考方案1】：

添加这个是因为我花了很多时间寻找一个简单的解决方案来消除高程。

移除阴影的最简单方法是将elevation 属性添加到AppBar。

<AppBar position="fixed" elevation=0>

【讨论】：

简单有效。用它来移除卡片边框和阴影

这会移除整个 AppBar 的阴影，而不仅仅是左侧的一小部分。

【参考方案2】：

您可以在您的navbar 中添加一个::after 伪元素来完成这项工作。此元素将具有您的侧边栏的宽度，并且将具有与您的 navbar 相对应的 top 属性。

鉴于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>
  );

我创建了一个只有导航栏的沙盒，以及一个更暗的阴影来增强对比度：