固定导航栏下方的 MUI 应用栏和模糊内容答案

【问题标题】：MUI App bar and blur content below fixed Navbar固定导航栏下方的 MUI 应用栏和模糊内容
【发布时间】：2021-07-29 09:37:21
【问题描述】：

有没有办法改变我的 material-ui AppBar 组件的背景属性来模糊固定导航栏的内容？

我已经尝试了过滤器：blur(0)，但它并没有像我想要的那样工作。我必须使用 React/Styled-components/Material-UI 在导航栏上获得这种效果

我已经在互联网上搜索了好几个小时...我想，例如在下面的链接中，在这个应用栏下得到一个模糊：https://codesandbox.io/s/mwbwd?file=/demo.js

【问题讨论】：

【解决方案1】：

只需在应用栏上添加sx={{backdropFilter:"blur(20px)"}} 并添加color="transparent" 。

点赞<AppBar color="transparent" sx={{backdropFilter:"blur(20px)"}}>

【讨论】：