[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.