CODEWITHSUNDEEP
reactjsmaterial-ui
Simplicio Carcamo
Simplicio Carcamo

Reputation: 113

How to center Dialog title in Material UI?

How can I center the DialogTitle (Material UI)? My code:

<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

Upvotes: 11

Views: 17920

Answers (5)

Florian Schut
Florian Schut

Reputation: 672

Directly adding Typography props to the <DialogTitle> didn't work in my case.

I did however find in the documentation that <DialogTitle> accepts a sx prop. Thus you can inline add styles as follows

<DialogTitle sx={{ textAlign:"center" }}>

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81773

I believe this is the shortest way in MUI v5. It is possible because DialogTitle returns a styled Typography which leverages system properties.

<DialogTitle textAlign="center">

Live Demo

Codesandbox Demo

Upvotes: 2

Pavan Jadda
Pavan Jadda

Reputation: 4891

None of the solutions work anymore. Try the following

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

and define custom-flex-justify-center class as follows

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

This works in Material UI 5 too

Upvotes: 0

SKy -
SKy -

Reputation: 31

u can just simply use the dialog title component and add typography component in there

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

hope this help :))

Upvotes: 3

Larry Maccherone
Larry Maccherone

Reputation: 9533

This works for me:

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

Upvotes: 19

Related Questions