Как установить CSS различных частей диалогового окна Material UI?

Question

Итак, это пример кода для диалога материалов

  <Dialog
    open={this.props.open}
    onClose={this.props.closeAtParent}
    PaperProps={{
      style: {
        minHeight: '75vh',
        minWidth: '75vw',
      },
    }}
    aria-labelledby="open-dialog-title"
    aria-describedby="open-dialog-description"
  >
    <DialogTitle id="open-dialog-title">
      {this.props.dialogs[this.state.selected].title}
    </DialogTitle>
    <DialogContent>
      <DialogContentText id="open-dialog-description">
        {this.props.dialogs[this.state.selected].desc}
      </DialogContentText>
      {this.imageIfExists()}
    </DialogContent>
    <DialogActions>
      {this.populateButtons()}
    </DialogActions>
  </Dialog>

Теперь, как вы можете видеть, я смог установить ширину и высоту диалога с помощью PaperPros, но я не могу установить другие свойства, такие как цвет фона и выравнивание кнопок DialogActions.

Нет документации или SO для того же, что так печально. Они упоминают classes и PaperProps, но не говорят о них.

Поэтому мои вопросы:

• Как отцентрировать кнопки, которые по умолчанию выровнены по правому краю?
• Кроме того, как мне изменить цвет фона, который изначально был серым?

Answer 1

Material-ui Dialog также наследует Modal Компонент, который вы можете использовать Props из Modal, чтобы изменить цвет фона

Описание модального API

Button в DialogActions по умолчанию выровнено до flex-end. Вы можете переопределить это поведение, используя свойство classes

const styles = {
  backdrop: {
    backgroundColor: blue[100],
    color: blue[600],
  },
  action:{
    justifyContent:'inherit',
  }
};

<Dialog
          BackdropProps={{
            classes: {
              root: classes.backdrop,
            }
          }}
          {...other}/>
      

<DialogActions
           className={classes.action}>

Демонстрация песочницы

Answer 2

вы можете использовать Grid для выравнивания вашего контента, в этом случае ваши кнопки, как описано здесь: https://material -ui.com / layout / grid /

Вы можете использовать BackdropProps для изменения значений фона. используйте: https://material -ui.com / api / dialog /

(ясно сказано: свойства модального компонента также доступны. Вы можете воспользоваться этим поведением для нацеливания на вложенные компоненты)

итоговый результат будет:

<Dialog
 onClose={this.handleClose}
 {...other}
 BackdropProps={{
  classes: {
   root: classes.root
  }
 }}
 PaperProps={{
  style: {
    minHeight: "75vh",
    minWidth: "75vw"
  }
 }}
 aria-labelledby="open-dialog-title"
 aria-describedby="open-dialog-description"
 >
  <DialogTitle id="open-dialog-title">title</DialogTitle>
   <DialogContent>
    <DialogContentText id="open-dialog-description">
     content
    </DialogContentText>
   </DialogContent>
   <DialogActions>
    <Grid container justify="center">
      <Grid item>
        <Button variant="raised" color="primary">
         test
        </Button>
      </Grid>
    </Grid>
   </DialogActions>
 </Dialog>

Вот рабочий пример: https://codesandbox.io/s/10vxmwqy7

надеюсь, это вам поможет.