How to disable MUI Blur effect on Menu dropdown?

Khaled Rostampour 0
Viewed 18

I want to disable Material-UI blur effect when a user opens a dropdown(select menu). maybe it's a nice effect for only one input, but imagine a form with 20 dropdowns and every time user clicks one of them the entire screen blur and becomes noisy and unhandy.

material-ui reactjs
1 Answers

you can ovverride mui styles with MUI createTheme.

For my react application when I deleted this styles ovverride, the blur effect disappeared image

you can just replace the blur with none

 MuiBackdrop: {
  styleOverrides: {
    root: {
      backgroundColor: 'transparent',
      backdropFilter: 'none',

      '&.MuiBackdrop-invisible': {
        backgroundColor: 'transparent',
        backdropFilter: 'none'
      }
    }
  }
},

you can read more here: https://mui.com/material-ui/customization/theming/

Ismail Charfi0
Related