[Select] slotProps can't pass to backdrop component

[ethaizone]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Before this code can work on previous version.
Here is version that it work before.

• @mui/material@5.14.2
  • @mui/base@5.0.0-beta.8

<Select
  MenuProps={{
    slotProps: {
      root: {
        slotProps: {
          backdrop: {
            style: {
              backgroundColor: 'transparent',
            },
          },
        },
      },
    },
  }}
>
  ...
</Select>

Current behavior 😯

It can't work. It failed when I run tsc and it show type error in VS Code.

Expected behavior 🤔

I should be able to change style of backdrop when I use <Select> component.

Context 🔦

I want to change background color of backdrop to be transparent. I debug them already as component path is (Select -> SelectInput -> Menu -> Popover -> Modal -> Backdrop).

I think these PRs is root cause.

• SelectInput pick slotProps for paper only. It doesn't send anythings else like root for menu. https://github.com/mui/material-ui/pull/38703/files#diff-9a04c7e4130d7be9f3351932c16ab1978ac63412882e985b689b17c3bae9fcabR555-R561
• I can't pass prop to popover. I guess it lacks some props but I don't know how should it looks like. https://github.com/mui/material-ui/pull/37902/files#diff-5feffa70201dcee554bada0b2f5849e4590f3781535a2e73060c2547abec6d1bR79

Your environment 🌎

npx @mui/envinfo

I use Chrome.

  System:
    OS: macOS 13.5.2
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Edge: Not Found
    Safari: 16.6
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.14
    @mui/core-downloads-tracker:  5.14.8
    @mui/icons-material: ^5.14.8 => 5.14.8
    @mui/lab: ^5.0.0-alpha.143 => 5.0.0-alpha.143
    @mui/material: ^5.14.8 => 5.14.8
    @mui/private-theming:  5.14.8
    @mui/styled-engine:  5.14.8
    @mui/styles: ^5.14.7 => 5.14.7
    @mui/system:  5.14.8
    @mui/types:  7.2.4
    @mui/utils:  5.14.8
    @mui/x-tree-view:  6.0.0-alpha.0
    @types/react:  18.2.16
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.2.2 => 5.2.2

[Zach-Jaensch]

I ran into the same issue. You can use the deprecated BackdropProps https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Modal/Modal.d.ts#L49C11-L49C11 as a work around, but this really needs fixing if we are expected to use the slots API (which worked in 5.10.13, not sure when it broke).

[ZeeshanTamboli]

The type error occurs since v5.14.3. It works in v5.14.2(CodeSandbox) but errors in v5.14.3(CodeSandbox). Looks like a regression from #37902 which was released in version 5.14.3.

@DiegoAndai Can you take a look?

[DiegoAndai]

I'll take a look