如何在 MUI 中居中对话框标题？

Question

如何使 DialogTitle (MUI) 居中？我的代码：

<Dialog
   open={this.state.open}
   titleStyle = {styles.Dialog}
   title='Title centered please!'
   actions={standardActions}
   onRequestClose={this.handleRequestClose}
>

  Dialog boby...
</Dialog>

title with text "Ingreso de Procedimientos" centered please

Answer 1

这对我有用：

<Dialog
   titleStyle={{textAlign: "center"}}
   ... />

Answer 2

你可以简单地使用对话框标题组件并在其中添加排版组件

<DialogTitle>
  <Typography variant="h3" align="center">Centered Title</Typography>
</DialogTitle>

希望对您有所帮助:))

Answer 3

None 的解决方案不再有效。尝试以下

 <DialogTitle>
    <label className={"h4 custom-flex-justify-center"}>Add New </label>
</DialogTitle>

并定义custom-flex-justify-center class如下

.custom-flex-justify-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

这也适用于 Material UI 5

Answer 4

我相信这是 MUI v5 中的最短路径。这是可能的，因为 DialogTitle returns a styled Typography which leverages system properties.

<DialogTitle textAlign="center">

如何在 MUI 中居中对话框标题？

How to center Dialog title in MUI?

reactjs

material-ui

现场演示