[material-ui][Drawer] React does not recognize the slotProps prop

[Danielvandervelden]

Steps to reproduce

Link to live example: (required)

Steps:

1. Import a Drawer component
2. Add slotProps={{ backdrop: { onClick: onCloseNav } }} to it
3. On mobile it works just fine, however on desktop it complains about React not recognising slotProps on element.

Current behavior

When loading the Drawer component on desktop with slotProps passed to it, it complains that React doesn't recognise this prop on a div HTML DOM element.

Expected behavior

It shouldn't complain error out.

Context

I want to close the drawer when the backdrop is clicked, so I need to pass the onClick listener for the backdrop through the slotProps of the Drawer component.

Your environment

npx @mui/envinfo

Chrome

 System:
    OS: macOS 14.3
  Binaries:
    Node: 21.6.2 - ~/.nvm/versions/node/v21.6.2/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v21.6.2/bin/npm
    pnpm: 8.15.4 - ~/.nvm/versions/node/v21.6.2/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.118
    Edge: Not Found
    Safari: 17.3
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.16 
    @mui/icons-material: ^5.15.16 => 5.15.16 
    @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170 
    @mui/material: ^5.15.16 => 5.15.16 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @types/react: ^18.3.1 => 18.3.1 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.4.5 => 5.4.5 

Search keywords: slotProps drawer component

[danilo-leal]

Hey, thanks for opening the issue! Could you provide a minimal reproduction? It helps us troubleshoot. A live example would be perfect. This StackBlitz sandbox template may be a good starting point.

[Danielvandervelden]

Hey @danilo-leal , yes I can create that for you here you go:

https://stackblitz.com/edit/stackblitz-starters-wcks5r?file=src%2FApp.tsx

We switch from permanent to temporary Drawer state when we go from mobile > desktop. If you load the Drawer on desktop you'll see the issue in your console. If you load it on mobile, you don't. I now realise I left out this crucial information, sorry 😅. Seems to be mainly related to the switching between permanent and temporary.

Hopefully this helps!

[ZeeshanTamboli]

The Modal component props, like slotProps.backdrop, are only available when the variant is temporary. Use it conditionally:

{...(variant === 'temporary' && {
  slotProps: { backdrop: { onClick: onCloseNav } },
})}

This is mentioned in the API documentation.

Checkout the updated StackBlitz: https://stackblitz.com/edit/stackblitz-starters-nhzdku?file=src%2FApp.tsx