[material-ui][Menu,Popover] `slotProps` cannot modify backdrop slot

[sydneyjodon-wk]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/backdrop-slotprops-hyhvct?file=%2Fsrc%2FDemo.tsx

Steps:

1. Try to set backdrop in slotProps for Menu or Popover components

Current behavior

Hello 👋

I think this is similar to https://github.com/mui/material-ui/issues/38949, but I am unable to set the backdrop slot on the Menu or Popover components - maybe I am misunderstanding, but the BackdropProps prop is deprecated and says to use slotProps.backdrop, but it doesn't seem to work.

Expected behavior

I expected to be able to modify the backdrop props on Menu and Popover components like this:

slotProps={{ backdrop: { style: { backgroundColor: "#fad" } } }}

Context

I'm trying to change the props on the backdrop for Menu and Popover

Your environment

See code sandbox: https://codesandbox.io/p/sandbox/backdrop-slotprops-hyhvct?file=%2Fsrc%2FDemo.tsx

Search keywords: backdrop slot

[ZeeshanTamboli]

Modifying the Backdrop works using slotProps.root.slotProps.backdrop instead. See CodeSandbox. The description for the deprecated BackdropProps incorrectly suggests using slotProps.backdrop for Menu and Popover. This only works for the Modal component. Similarly, the BackdropComponent prop should also be updated, as slots.backdrop doesn’t work directly for Menu and Popover—you need to use slotProps.root.slots.backdrop.

To fix this, we could omit the type from ModalProps in Popover and redefine the prop to correct the description:

--- a/packages/mui-material/src/Popover/Popover.d.ts
+++ b/packages/mui-material/src/Popover/Popover.d.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { InternalStandardProps as StandardProps } from '..';
 import Paper, { PaperProps } from '../Paper';
+import { BackdropProps } from '../Backdrop';
 import Modal, { ModalOwnerState, ModalProps } from '../Modal';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
@@ -39,7 +40,10 @@ interface PopoverVirtualElement {
 }

 export interface PopoverProps
-  extends StandardProps<Omit<ModalProps, 'slots' | 'slotProps'>, 'children'>,
+  extends StandardProps<
+      Omit<ModalProps, 'slots' | 'slotProps' | 'BackdropProps' | 'BackdropComponent'>,
+      'children'
+    >,
     PopoverSlotsAndSlotProps {
   /**
    * A ref for imperative actions.
@@ -82,6 +86,26 @@ export interface PopoverProps
    * @default 'anchorEl'
    */
   anchorReference?: PopoverReference;
+  /**
+   * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `slotProps.root.slots.backdrop` instead. While this prop currently works, it will be removed in th
e next major version.
+   * Use the `slotProps.root.slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
+   */
+  BackdropComponent?: React.ElementType<BackdropProps>;
+  /**
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `slotProps.root.slotProps.backdrop` instead.
+   */
+  BackdropProps?: Partial<BackdropProps>;
   /**
    * The content of the component.
    */

Not sure if this is the best solution. cc @DiegoAndai

[DiegoAndai]

@ZeeshanTamboli suggestion is the correct fix here 👍🏼

[ZeeshanTamboli]

@sydneyjodon-wk Would you like to create a PR?

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] We value your feedback @sydneyjodon-wk! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!