如何使 MUI 对话框标题成为 H1 元素，以便可以访问模式

Question

我正在努力让我的应用程序更易于访问，但正在努力使用 MUI 对话框组件。我正在使用 DialogTitle 组件，它创建一个 H2 元素，但遇到“页面不包含一级标题”的问题。我应该以其他方式创建我的模式，还是 MUI 对话框无法访问？

import { Dialog, DialogTitle } from '@mui/material';

const MyModal = () => {

    return (
        <Dialog open={true}>
            <DialogTitle>
                My Title
            </DialogTitle>
        </Dialog>
    );
};

export default MyModal;

Answer 1

更新了 MUI v5：

Dialog

组件 API 包含一个帮助器

DialogTitle

组件，默认情况下，该组件在

h2

元素中呈现其内容。要更改此功能，您可以将

component

属性传递给

DialogTitle

，以使用您希望的任何

DialogTitle

渲染

elementType

。例如：

<DialogTitle component="h1">
  My Dialog Title
</DialogTitle>

这是目前

DialogTitle

的一个未记录的功能，但在源代码中可以看到，传递给

DialogTitle

的属性被传播到底层的

Typography

组件上——通过传递

component

，您本质上是用您自己的值覆盖硬编码的

component="h2"

属性。

工作示例：https://codesandbox.io/s/simpledialog-material-demo-forked-kpq9k?file=/demo.js

MUI v4 的原始答案：

Dialog

组件 API 包含一个帮助器

DialogTitle

组件，默认情况下，该组件在

h2

元素中呈现其内容。要禁用此功能，您可以将

DialogTitle

组件与

disableTypography

属性一起使用（以禁用

h2

环绕行为），然后将您自己的

Typography

组件设置为

h1

。例如：

<DialogTitle disableTypography>
  <Typography variant="h1">My Dialog Title</Typography>
</DialogTitle>

工作示例：https://codesandbox.io/s/material-demo-forked-7pso2?file=/demo.js

额外加分：您可能会遇到

h1

的样式对于您的设计“太大”的问题。如果是这样，并且您更喜欢

h2

的外观，则可以将名为

Typography

的

component

属性与

variant

属性结合使用，以在视觉上将其样式恢复为

h2

，同时保持底层

h1

元素。例如：

<DialogTitle disableTypography>
  <Typography variant="h2" component="h1">My Dialog Title</Typography>
</DialogTitle>

Answer 2

对于 TypeScript，没有提供输入，因此您需要进行修改：

<DialogTitle {...{ component: 'div' } as any}>
  <Typography variant="h1">My Dialog Title</Typography>
</DialogTitle>

这是一个临时黑客，直到他们为所有道具添加打字。

Answer 3

正如 @Steve 提到的，在 Mui v5 中，这项工作更加困难。即使你指定了

component

属性（这在 TS 中不起作用，而且这是一个不好的做法），它也不会改变样式，因为它会以 h6 样式渲染 h2。

最干净的解决方法是混淆 CSS（例如在样式组件中）

// Styling
import { styled } from "@mui/system";

// UI
import { DialogTitle as MuiDialogTitle } from "@mui/material";


const DialogTitle = styled(MuiDialogTitle)(({ theme }) => ({
  "&.MuiDialogTitle-root.MuiTypography-root": {
    fontSize: 25,
    fontWeight: "bold",
  },
}));