[Dialog] Types are not derived properly for the `paper` slot when using `component`

[Jazzmanpw]

Steps to reproduce

Steps:

1. Open this link to live example
2. See the two versions of <Dialog /> using different way to customize PaperProps.component

Current behavior

Deprecated DialogProps.PaperProps derives types properly, but DialogProps.slotProps.paper doesn't

Expected behavior

DialogProps.slotProps.paper handles the PaperProps.component prop and allows adding properties that don't exist on a Paper, but exist on the component provided

Context

I'm building a form dialog. I try to follow the example given in the docs for this pattern, but the example uses deprecated API, and the suggested newer API breaks types

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.26100
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.6.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (127.0.2651.86)
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  6.4.1
    @mui/icons-material: ^6.4.1 => 6.4.1
    @mui/material: ^6.4.1 => 6.4.1
    @mui/material-nextjs: ^6.3.1 => 6.3.1
    @mui/private-theming:  6.4.1
    @mui/styled-engine:  6.4.0
    @mui/system:  6.4.1
    @mui/types:  7.2.21
    @mui/utils:  6.4.1
    @types/react: ^19 => 19.0.7
    react: ^19.0.0 => 19.0.0
    react-dom: ^19.0.0 => 19.0.0
    typescript: ^5 => 5.7.

Search keywords: slot, paper, dialog, types

[DiegoAndai]

Hey @Jazzmanpw, thanks for reaching out!

To specify other props that are not included, you should use module augmentation. In your example, it would be:

import Dialog from "@mui/material/Dialog";
import { useState } from "react";
import "./styles.css";

declare module "@mui/material/Dialog" {
  interface DialogPaperSlotPropsOverrides {
    noValidate: boolean;
  }
}

// ...

Here's a sandbox: https://codesandbox.io/p/sandbox/issue-45142-solution-t2cwkt

You could also extend it so it includes all of the form's props. Let me know if this works for you.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[rinrin528]

@DiegoAndai @sai6855
Hi,
I ran into a similar issue.
I'm using @mui/material-ui@v6.4.10.
From what I understand, slotProps support was added to the Dialog component in v6.4.1.
But it's still not working for me.
I have some conditional styling logic for the border radius and elevation using media queries.
It works as expected with PaperProps, but not with slotProps.paper.

+      slotProps={{
+        paper: {
-   PaperProps={{
          ...(isMobile && {
            elevation: 0,
            sx: {
              borderRadius: '15px 15px 0px 0px',
            },
          }),
+        },
      }}

Is this a known issue, or am I missing something?

[DiegoAndai]

Hi @rinrin528, sorry for the delay.

May I ask you to open a separate issue with a minimal reproduction? thanks in advance.

[shawna-mi]

I ran into this issue too and it feels like an anti-pattern to permanently extend the interface when in other places in Material, the component prop automatically handles the component's prop types.