Как добавить фоновое изображение на материале компонента Диалог - PullRequest
Новая
       14

Как добавить фоновое изображение на материале компонента Диалог

0 голосов
/ 27 апреля 2019

Я использую material-ui version 3.9.3 в своем приложении React.Я хочу добавить фоновое изображение в диалоге.Я использую для этого компонент Dialog, но не могу добавить фоновое изображение для всего диалога.Например: 


    <Dialog
       fullScreen={fullScreen}
        open={this.props.open}
        onClose={this.handleClose}
        aria-labelledby='responsive-dialog-title'
        >
        <DialogTitle
          id='customized-dialog-title'
          onClose={this.handleClose}
          noCloseButtonNeeded={noCloseButtonNeeded}
        >
          {/* some jsx */}
         </DialogTitle>
        <DialogContent>
          {children}
        </DialogContent>
      </Dialog>

Я пытался добавить изображение, используя классы и пользовательский CSS, но я не могу это сделать.Может кто-нибудь помочь мне добавить это?Заранее спасибо:)

1 Ответ

0 голосов
/ 29 апреля 2019

Во-первых, вы можете определить фоновое изображение в styles объекте, который можно использовать с компонентом высшего порядка withStyles , чтобы применить его к диалоговому окну: 

const styles = {
  dialog: {
    backgroundImage: "url(https://i.imgur.com/HeGEEbu.jpg)"
  }
};

Когда вы передадите этот объект в withStyles HOC, он предоставит вашему компоненту classes проп, содержащий свойства с теми же именами, что и свойства в styles, которые вы определили.

Далее,Вы можете применить этот класс к Dialog, используя преимущества classes prop (конкретные переопределения, доступные для компонента Dialog, подробно описаны здесь ): 

<Dialog ... classes={{paper: classes.dialog}}>
        {/* ... */}
</Dialog>

Это говорит материалу-ui объединить стили, которые вы определили в styles.dialog, со стилями по умолчанию для элемента Paper, который используется в диалоге.

Вам понадобитсяубедитесь, что вы помещаете свой компонент в withStyles HoC.Если у вас есть компонент класса, он будет выглядеть примерно так: 

export default withStyles(styles)(DialogWithBackgroundImage);

Для функциональных компонентов это будет выглядеть примерно так: 

export default withStyles(styles)(({open, children, classes}) => (<Dialog ...></Dialog>))

Вот рабочий пример, который связывает все вместе: https://codesandbox.io/embed/q3zy4r2np4

...