blur content on header when scrolling

[Jedidiahip]

Summary

How to achieve header backdrop-filter blur on the content only like MUI docs

Examples

currently the best I can do is to add a padding to the content and turn header to transparent and filter it. But this will make the scroll bar also be filtered.

Motivation

Making the header transparent the app feels more spacious and modern.

Search keywords: scroll

[apedroferreira]

Hi, does it work if you use the sx prop in the DashboardLayout and try to target the CSS classes for the MUI header?

If it's not that simple I can take a look and how to do that eventually, maybe we're missing the customization options that are necessary.

[Jedidiahip]

Hi, sorry for the late reply. The sx props can target the MUI header and backdrop filter can be applied to the header

<DashboardLayout
...
sx={{
"& .MuiToolbar-root":{
    minHeight:"0px",
  },
"& .MuiAppBar-root.MuiPaper-root":{
    background:"transparent",
    backdropFilter:"blur(10px)",
  },
}}
...
/>

howerver, this will also put the scrollbar under the backdrop filter. In MUI core docs is using useScrollTrigger to put the scrollbar to the most right which solve the problem that the scroll is being filtered. In toolpad how can I achieve this?

many thanks