[joy-ui][ModalDialog] Cannot add or remove layouts with styleOverrides to the ModalDialog

[maakcode]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: Link

Steps:

1. Add or remove layouts using ModalDialogPropsLayoutOverrides
2. Use the layout props in ModalDialog.

Current behavior 😯

Adding or removing layout props using styleOverrides has no effect.

Expected behavior 🤔

Changes take effect when you add or remove layout props using styleOverrides, as in the examples mentioned in the documentation.

• https://mui.com/joy-ui/react-modal/#modal-dialog

Context 🔦

I wanted to add a modal layout located at the top of the screen, like the code in the example document.

Your environment 🌎

• Browser: Safari 17.2(19617.1.17.11.9)
  npx @mui/envinfo

  System:
    OS: macOS 14.2
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.9.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
  Browsers:
    Chrome: 119.0.6045.105
    Edge: Not Found
    Safari: 17.2
  npmPackages:
    @emotion/react:  11.11.3 
    @emotion/styled:  11.11.0 
    @mui/base:  5.0.0-beta.29 
    @mui/codemod:  5.15.2 
    @mui/core-downloads-tracker:  5.15.2 
    @mui/docs:  5.15.2 
    @mui/envinfo:  2.0.15 
    @mui/icons-material:  5.15.2 
    @mui/internal-waterfall:  1.0.0 
    @mui/joy:  5.0.0-beta.20 
    @mui/lab:  5.0.0-alpha.158 
    @mui/markdown:  5.0.0 
    @mui/material:  5.15.2 
    @mui/material-next:  6.0.0-alpha.115 
    @mui/material-nextjs:  5.15.0 
    @mui/private-theming:  5.15.2 
    @mui/styled-engine:  5.15.2 
    @mui/styled-engine-sc:  6.0.0-alpha.10 
    @mui/styles:  5.15.2 
    @mui/system:  5.15.2 
    @mui/types:  7.2.11 
    @mui/utils:  5.15.2 
    @mui/x-charts:  6.18.4 
    @mui/x-data-grid:  6.18.6 
    @mui/x-data-grid-generator:  6.18.6 
    @mui/x-data-grid-premium:  6.18.6 
    @mui/x-data-grid-pro:  6.18.6 
    @mui/x-date-pickers:  6.18.6 
    @mui/x-date-pickers-pro:  6.18.6 
    @mui/x-license-pro:  6.10.2 
    @mui/x-tree-view:  6.17.0 
    @mui/zero-jest:  0.0.1-alpha.0 
    @mui/zero-next-plugin:  0.0.1-alpha.0 
    @mui/zero-runtime:  0.0.1-alpha.0 
    @mui/zero-tag-processor:  0.0.1-alpha.0 
    @mui/zero-vite-plugin:  0.0.1-alpha.0 
    @types/react: ^18.2.42 => 18.2.42 
    react:  18.2.0 
    react-dom:  18.2.0 
    styled-components:  6.1.3 
    typescript: ^5.3.3 => 5.3.3 

[ZeeshanTamboli]

Thanks for reporting. I think it is only a type error. The following fix should work:

--- a/packages/mui-joy/src/ModalDialog/ModalDialogProps.ts
+++ b/packages/mui-joy/src/ModalDialog/ModalDialogProps.ts
@@ -60,7 +60,7 @@ export interface ModalDialogTypeMap<P = {}, D extends React.ElementType = 'div'>
      * The layout of the dialog
      * @default 'center'
      */
-    layout?: 'center' | 'fullscreen';
+    layout?: OverridableStringUnion<'center' | 'fullscreen', ModalDialogPropsLayoutOverrides>;
     /**
      * The component orientation.
      * @default 'vertical'

Would you like to create a PR?

[maakcode]

@ZeeshanTamboli Yes.

[ZeeshanTamboli]

@maakcode Feel free to create a PR.