MUI DialogTitle组件自定义ID不生效问题求解

我希望为MUI的<DialogTitle />组件设置自定义id，但无论指定什么id，组件都会从<Dialog />的aria-labelledby取值作为自身id；若不传递aria-labelledby，则会使用MUI生成的随机id，无法使用自定义id。

当前代码示例：

<Dialog
  fullScreen={fullScreen}
  open={open}
  onClose={handleClose}
  aria-labelledby="responsive-dialog-title"
>
  <DialogTitle id="test-custom-id">
    {"Use Google's location service?"}
  </DialogTitle>
</Dialog>

问题说明 #

这是MUI组件库本身的逻辑问题，目前已在GitHub提交相关Issue。

临时解决办法 #

如果需要让<DialogTitle />使用自定义id，同时保证无障碍属性的正确性，可以将<Dialog />的aria-labelledby值设置为和<DialogTitle />的自定义id一致：

<Dialog
  fullScreen={fullScreen}
  open={open}
  onClose={handleClose}
  aria-labelledby="test-custom-id"
>
  <DialogTitle id="test-custom-id">
    {"Use Google's location service?"}
  </DialogTitle>
</Dialog>

这样设置后，<DialogTitle />的id会是你指定的test-custom-id，同时<Dialog />的aria-labelledby也能正确关联到标题，符合无障碍规范。

如果不需要无障碍关联，可以不设置<Dialog />的aria-labelledby，但此时组件仍会生成随机id而非使用自定义id，这部分需要等待组件库修复该Issue后才能解决。

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