Estoy tratando de cambiar el tamaño del elemento del título del cuadro de diálogo para un mensaje de advertencia, sin embargo, tengo un comportamiento extraño y no estoy seguro de qué lo causa.

El error de inicio de sesión está destinado a estar dentro del elemento azul oscuro de la pantalla. Y aunque logré cambiar el tamaño del texto, no estoy seguro de por qué está desplazado fuera del elemento DialogTitle. Aquí hay un código, tal vez alguien me pueda aconsejar sobre lo que está mal:

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

Y la anulación cargada a través del tema es:

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

¿Qué me estoy perdiendo? Tengo entendido que la altura del elemento DialogTitle también abarcaría los elementos dentro de él, a menos que se proporcione una anulación específica que coincida con una clase dentro.