CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
anon_dcs3spp
anon_dcs3spp

Reputation: 3002

How to customise DialogTitle in material-ui

I am learning react and material-ui and trying to update the colour of the font in the DialogTitle component. This link gave a solution of overriding the dialog root class (code listed below). How do I override the root class for DialogTitle so that I can change the style of the title?

root: {
    backgroundColor: theme.palette.primary.main,
    '& h6': {
      color: 'red'
    }
  }

Found a solution. 

<DialogTitle
    disableTypography
    id="alert-dialog-title"
    style={{ backgroundColor: 'navy', color: 'white' }}
>
    <Typography variant="h6">{ErrorBoundary.title}</Typography>
</DialogTitle>

Upvotes: 2

Views: 7111

Answers (1)

kag359six
kag359six

Reputation: 2253

If you want to override the DialogTitle in your theme.js file, or wherever your theme is located, you can do the following:

MuiDialogTitle: {
  root: {
    color: 'blue'
  }
}

You have to mention the component class name. In the API section of every material ui component, the name is specified here:

enter image description here

Upvotes: 1

Related Questions