html - How with Material UI to align input fields and buttons in the correct way in a dialog

Question

In my React app, I have to align correctly the items in a dialog of MUI.

As per the screenshot, I have an issue to align the input fields Date and time. They should be aligned in the center and the Date input should start aligned with the title text above and the Time input should align with the button on the far right Save and close.

The second main issue is the buttons, I need to position Cancel and Save and close on the right and on the same row but on the left side, the button Remove call.

I have an issue making these alignments.

The code of the dialog

const useStyles = makeStyles(theme => ({
  root: {
    margin: 0,
    padding: theme.spacing(1),
    '& .MuiFilledInput-root': {
      borderRadius: 0,
    },
  },
  dialogTitle: {
    marginTop: theme.spacing(2),
  },
  container: {
    margin: theme.spacing(1),
    width: '80%',
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
  },
  button: {
    marginRight: theme.spacing(1),
    height: 40,
  },
  paper: {
    overflowY: 'unset',
  },
  closeButton: {
    position: 'absolute',
    left: '93%',
    top: '3%',
    color: 'gray',
  },
  buttonRight: {
    justifyContent: 'flex-end',
  },
}));

 <Dialog
      open={open}
      fullWidth
      maxWidth="md"
      classes={{ paper: classes.paper }}
    >
      <DialogTitle className={classes.dialogTitle}>
        <Typography variant="h1" gutterBottom>
          Schedule a call
        </Typography>
        <InfoCallMessage call={appointment} />
      </DialogTitle>
      {!loading ? (
        <>
          <DialogContent className={classes.root}>
            <Grid
              className={classes.container}
              container
              justify="flex-end"
              alignItems="center"
              spacing={1}
            >
              <Grid item xs={8}>
                <MuiPickersUtilsProvider utils={LuxonUtils}>
                  <DatePicker
                    className={classes.input}
                    disableToolbar
                    variant="inline"
                    label="Date"
                    format="cccc, LLLL dd"
                    helperText=""
                    value={date}
                    margin="normal"
                    onChange={newDate => {
                      handleDateOnChange({ newDate });
                    }}
                    inputVariant="filled"
                    fullWidth
                    minDate={new Date()}
                  />
                </MuiPickersUtilsProvider>
              </Grid>

              <Grid item xs={4}>
                <TextField
                  key={time}
                  id="time"
                  label="Time"
                  type="time"
                  defaultValue={time}
                  className={classes.textField}
                  InputLabelProps={{
                    shrink: true,
                  }}
                  variant="filled"
                  margin="normal"
                  onChange={e => {
                    const { value } = e.target;
                    setTime(value);
                  }}
                  fullWidth
                />
              </Grid>
              <ErrorDateTimeIsAfter />
            </Grid>
          </DialogContent>
          <DialogActions className={classes.buttonRight}>
            <IconButton
              className={classes.closeButton}
              onClick={() => closeDialog()}
            >
              <CloseIcon />
            </IconButton>
            <Grid justify="space-between" container spacing={1}>
              <Grid item>
                <Button
                  color="secondary"
                  variant="contained"
                  onClick={() => closeDialog()}
                  className={classes.button}
                >
                  Remove call
                </Button>
              </Grid>
              <Grid item>
                <Button
                  color="primary"
                  variant="outlined"
                  onClick={() => closeDialog()}
                  className={classes.button}
                >
                  Cancel
                </Button>
              </Grid>
              <Grid item>
                <Button
                  color="primary"
                  variant="contained"
                  onClick={() => handelSave()}
                  className={classes.button}
                  disabled={!isAfter(parseISO(`${date}T${time}`), new Date())}
                >
                  Save and Close
                </Button>
              </Grid>
            </Grid>
          </DialogActions>
        </>
      ) : (
        <Loading />
      )}
    </Dialog>

Answer 1

等待大神解答