Как сделать прозрачным фон диалога Material UI v1.0? - PullRequest
Новая
       26

Как сделать прозрачным фон диалога Material UI v1.0?

0 голосов
/ 03 июня 2018

Я пытаюсь поместить CircularProgress в диалоговое окно.Но фон диалогового окна белый, и его нельзя установить прозрачным, как в более ранней версии - Материал UI v0.2 

style={{
    width: '200px',
    marginLeft: '40%',
    backgroundColor: 'transparent'
}}

Мне нужно сделать фон диалога прозрачным. Вот мойкод: 

<Dialog
      bodyStyle={{margin: 0, padding: 0}}
      open={true}
      style={{
        width: '200px',
        marginLeft: '40%',
        backgroundColor: 'transparent'
      }}
      overlayStyle={{backgroundColor: 'transparent'}}
    >
      <CircularProgress
        style={{display: 'inline-block'}}
        size={50}
        color={"#00db49"}
      />
</Dialog>

А как убрать полосу прокрутки в диалоге как показано на картинке? enter image description here

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Вы можете переопределить свойства css элемента Paper, используя свойство PaperProps в компоненте Dialog.(отсюда: https://material -ui.com / api / dialog / )

в качестве примера: 

    <Dialog
      onClose={this.handleClose}
      aria-labelledby="simple-dialog-title"
      {...other}
      BackdropProps={{
        classes: {
         root: classes.root
        }
       }
      }
      PaperProps ={{
        classes: {
         root: classes.paper
        }
      }}
      >
      <DialogTitle id="simple-dialog-title">Set backup 
 account
      </DialogTitle>
       // code you want is here   
    </Dialog>

и стиль бумаги должен быть представлен следующим образом: 

const styles = {
  root: {
    backgroundColor: "transparent"
  },

  paper: {
    backgroundColor: "transparent",
    boxShadow: "none",
    overflow: "hidden"
  },
};

надеюсь, это поможет вам, и вот рабочий пример: https://codesandbox.io/s/j3wmyv7w2w

0 голосов
/ 03 июня 2018

А-а ... переопределение материала в пользовательском интерфейсе всегда является проблемой

Поскольку вы не можете напрямую переопределить вложенный в материал div-CSS, используя стиль и классы.Поскольку диалоговое окно также наследует свойства MODAL для этого фонового наложения, поэтому вы должны использовать один из реквизитов, перечисленных в модальных реквизитах, и для этого варианта использования вы должны переопределить Backdrop реквизитов, перечисленных вModal api docs.

Проще говоря, просто запишите это в свой диалог 

// outside react class 
const styles = {
  root: {
    backgroundColor: "transparent"
  }
};

// In your react class 
<Dialog
  onClose={this.handleClose}
  aria-labelledby="simple-dialog-title"
  {...other}
  BackdropProps={{
  classes: {
    root: classes.root
    }
   }}
  >

Я приложил рабочий пример пользовательского интерфейса материала в codesandbox.см. ниже

Обязательно оберните свой компонент с помощью withStyles (), как в примере ниже

Ссылка CodeSandBox: https://codesandbox.io/s/5xp76wn3xp

И чтобы скрыть полосу прокрутки, на это уже есть ответ: Скрыть полосу прокрутки, но при этом возможность прокрутки

Дайте мне знать, если вам нужна дополнительная помощь

...