[Backdrop] `component` prop doesn't have an effect

[joelvdavies]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/github-yz9jia8s?file=src%2FApp.tsx
2. Inspect the rendered backdrop element to see it is still using a div

Current behavior

The component remains a div, even when component="span" or other element types are supplied.

Expected behavior

The backdrop component should use the specified element type. It seems slots={{ root: 'span' }} works correctly in the way I would expect the component prop to.

Context

In our case we were using this inside a table component and to maintain a valid table structure we wanted it to render it as a "tr" component. I believe this is the same as #44283, only that was closed as it lacked an example.

Your environment

We use MUI v6 currently, but the above example demonstrates it on the latest MUI v7 version.

Search keywords: backdrop component prop

[siriwatknp]

Missing component in the externalForwardedProps.

diff --git a/packages/mui-material/src/Backdrop/Backdrop.js b/packages/mui-material/src/Backdrop/Backdrop.js
index ba4b6ff911..2505c73b24 100644
--- a/packages/mui-material/src/Backdrop/Backdrop.js
+++ b/packages/mui-material/src/Backdrop/Backdrop.js
@@ -80,6 +80,7 @@ const Backdrop = React.forwardRef(function Backdrop(inProps, ref) {
   };
   const backwardCompatibleSlotProps = { ...componentsProps, ...slotProps };
   const externalForwardedProps = {
+    component,
     slots: backwardCompatibleSlots,
     slotProps: backwardCompatibleSlotProps,
   };

@sai6855 Would you like to fix this?

[sai6855]

Okay I'll fix it

[github-actions]

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.