材质用户界面样式对话框/模态背景 | 材质用户界面样式对话框

本文介绍了材质用户界面样式对话框/模态背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我该如何设计Material-UI对话框或模式的透明深色覆盖层的样式?我正在使用material-ui/React/Typescript.

How do I go about styling the transparent dark overlay of a material-ui dialog or modal?I'm using material-ui/React/Typescript.

我希望它不是透明的黑色，而是透明的白色.我希望使用 JSS 解决方案，但欢迎使用内联样式.

Instead of a transparent dark, I want it to be a transparent white.I'd prefer a JSS solution but an inline style is welcomed.

推荐答案

您可以使用模式的BackdropProps属性:

You can use the BackdropProps property of the modal:

<Modal
          aria-labelledby="simple-modal-title"
          aria-describedby="simple-modal-description"
          open={this.state.open}
          onClose={this.handleClose}
          BackdropProps= {{
              classes: {
                  root: classes.backDrop
              }
          }}
        >

并在您的样式对象中:

...
backDrop: {
    background: 'rgba(255,255,255,0.2)',
  },

这篇关于材质用户界面样式对话框/模态背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！