I'm struggling with removing the unwanted whitespace above the title in my Material UI dialog popup. Even after applying a background color to the title and content area, I still have a white margin at the top that I can't seem to eliminate.
Does anyone have any suggestions on how to fix this issue?
https://i.sstatic.net/cDLuf.png
<Dialog
id="myDialog"
classes={{ paper: classes.dialog }}
onClose={handleCloseTagInstructions}
open={openTagInstructions}
aria-labelledby="form-dialog-title"
fullWidth={true}
>
<DialogActions>
<IconButton
className={classes.customizedButton}
onClick={handleCloseTagInstructions}
>
<CloseIcon />
</IconButton>
</DialogActions>
<DialogTitle id="helper-dialog-title" style={{ backgroundColor: '#eeeeee' }}>
<Typography variant="h5">White's Semi-Open Files at</Typography>
</DialogTitle>
<DialogContent style={{ backgroundColor: '#f5f5f5' }} dividers>
<Typography variant="h6">White's Strategy</Typography>
<Typography paragraph="true">Blah</Typography>
<Typography variant="h6">Black's Strategy</Typography>
<Typography paragraph="true">???</Typography>
<Typography variant="h6">Notes</Typography>
<Grid container spacing={3}>
<Grid item xs={6}>
<Typography paragraph="true">Blah.</Typography>
</Grid>
<Grid item xs={6}>
<Paper width="5%" id="board3"></Paper>
</Grid>
</Grid>
</DialogContent>
</Dialog>;