[Modal] Unstyled Modal Backdrop does not show, does not receive mouse events

[EagleLizard]

Steps to reproduce

I encountered this bug during a routine project update. It occurs when using the base modal without using style.

Steps:

1. Open this link to live example (forked from Docs): https://stackblitz.com/edit/react-3hwyqh-c2gn5b?file=Demo.tsx
2. Click "Open modal"
3. Observe that the backdrop does not display
4. Click outside of the modal

Additionally, className props passed to the backdrop slot component are no longer applied to the backdrop modal. I have been using a className to provide the styling from a stylesheet.

Current behavior

The modal backdrop does not show, click events no longer work. Provided className not included.

Expected behavior

Modal backdrop to show and respond to click events. Provided className prop on backdrop slot component passed to the rendered component.

Context

I maintain my wife's portfolio website at https://janicechan.design/, and I use the modal to construct a lgithbox image gallery.

You can view an example via this link: https://janicechan.design/scenic/the-tales-of-hoffmann?galleryImg=00-hoffmann-title

The entire source code can be found here: https://github.com/EagleLizard/jcd-v3

• The specific lightbox component: https://github.com/EagleLizard/jcd-v3/blob/master/src/app/common/lightbox-modal/lightbox-modal.tsx

Your environment

Browser:

Brave [Version 1.71.123 Chromium: 130.0.6723.116 (Official Build) (arm64)](https://brave.com/latest/)

User Agent:

Chrome
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36,gzip(gfe)

npx @mui/envinfo

  System:
    OS: macOS 15.1.1
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.86
    Edge: 131.0.2903.70
    Safari: 18.1.1
  npmPackages:
    @emotion/react: ^11.10.5 => 11.13.5 
    @emotion/styled: ^11.10.5 => 11.13.5 
    @mui/base: ^5.0.0-beta.62 => 5.0.0-beta.62 
    @mui/core-downloads-tracker:  6.1.8 
    @mui/icons-material: ^6.1.8 => 6.1.8 
    @mui/material: ^6.1.8 => 6.1.8 
    @mui/private-theming:  6.1.8 
    @mui/styled-engine:  6.1.8 
    @mui/system: ^6.1.8 => 6.1.8 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.8 
    @types/react: ^17.0.11 => 17.0.83 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.8.4 => 4.9.5 

Search keywords: modal backdrop