如何移除Material-UI v5 Dialog组件默认添加的tabindex="-1"

下面是几种彻底移除这个默认属性的方法，分版本说明：

MUI v5及以上版本 #

单个Dialog移除 #

直接用slotProps给Dialog的外层容器传递tabIndex: undefined，就能覆盖默认的tabindex="-1"：

import Dialog from '@mui/material/Dialog';

<Dialog
  open={open}
  onClose={handleClose}
  slotProps={{
    container: {
      tabIndex: undefined
    }
  }}
>
  {/* 你的Dialog内容 */}
</Dialog>

全局所有Dialog移除 #

如果想让项目里所有Dialog都去掉这个属性，可以在自定义主题里配置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    MuiDialog: {
      defaultProps: {
        slotProps: {
          container: {
            tabIndex: undefined
          }
        }
      }
    }
  }
});

// 把ThemeProvider套在应用根组件外
<ThemeProvider theme={customTheme}>
  {/* 应用内容 */}
</ThemeProvider>

MUI v4版本 #

v4没有slotProps，可以通过自定义container的方式修改：

import Dialog from '@material-ui/core/Dialog';
import React from 'react';

<Dialog
  open={open}
  onClose={handleClose}
  container={(props) => {
    // 克隆容器元素，将tabindex设为undefined移除属性
    return React.cloneElement(props.children, { tabIndex: undefined });
  }}
>
  {/* 你的Dialog内容 */}
</Dialog>

提醒：这个tabindex="-1"是MUI为了辅助键盘导航和可访问性设置的，移除前请确认不会影响页面的无障碍体验。

内容的提问来源于stack exchange，提问作者Anonymous