I’m trying to resize the dialog title element for a warning message, however I am getting odd behavior, and unsure what causes it.

Login Error is meant to be within the dark-blue element of the screen. And while I managed to resize the text, I am not sure why it is displaced outside what the DialogTitle element is. Here’s some code, maybe someone can advise me on what’s wrong:

        <div>
            <Dialog open={this.props.open}>
                <DialogTitle>
                    {this.props.title}
                </DialogTitle>
                <DialogContent>
                        ...
                </DialogContent>
                <DialogActions>
                        ...
                </DialogActions>
            </Dialog>
        </div>

And the override loaded via the theme is:

overrides: {
    ...,
    MuiDialogTitle: {
        root: {
            backgroundColor: "#2c9cf2",
            height: "20px",
            fontSizeAdjust: 0.4,
        },
    },

What am I missing? My understanding that the height of the DialogTitle element would encompass the items inside of it too, unless a specific override is given that matches a class inside.