Блог

Главная - Вопросы по программированию - Удаление верхнего пробела из диалогового окна

Удаление верхнего пробела из диалогового окна

#css #material-ui

Вопрос:

У меня есть всплывающее диалоговое окно с использованием пользовательского интерфейса Material, в котором я не могу избавиться от пробелов над заголовком. Я применил цвет фона к области заголовка и содержимого, но затем вверху осталось белое поле, от которого я, похоже, не могу избавиться.

Есть идеи, как это сделать?

Пробел в верхней части проблемы

 <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>;

Комментарии:

1. привет, мой ответ ниже сработал для вас?

2. Проголосовали за решение. Спасибо.

Ответ №1:

попробуйте изменить поле диалогового окна dialog { margin-top: -10px !important; }

вот пример с вашим кодом :

 <Dialog
  style="margin-top: -10px"
  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>;
Метки: