How to customise DialogTitle in material-ui

user_12152982 0
Viewed 5197

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>
material-ui typescript reactjs
1 Answers

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

user_17425740
Related