如何将图像部分移动到 MUI 对话框之外？

Question

试图将图像移到MUI dialog 之外，这样图像的底部将在对话框内，而图像的上部将在对话框外。我已尝试实施此解决方案CSS: position nested element slightly outside of parent element's bounds，但它不起作用。

这是我的对话：

<Dialog open={this.state.open} onEnter={console.log("Hey.")}>
   <div className="dialog-logo-outside" />
   <DialogTitle>Hello CodeSandbox</DialogTitle>
   <DialogContent>Start editing to see some magic happen!</DialogContent>
</Dialog>

这是 CSS：

.App {
  font-family: sans-serif;
  text-align: center;
}

.dialog-logo-outside {
  width: 100px;
  height: 100px;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: -50px;
  background-image: url(https://i.imgur.com/24p8XE7.jpg);
}

您可以在此处查看沙盒中的示例：https://codesandbox.io/s/material-ui-dialog-sample-forked-8w5wt

Answer 1

实际上，我需要将 overflow: inherit 添加到 Dialog 的纸质子组件中，您可以在此处查看一个工作示例： https://codesandbox.io/s/material-ui-dialog-sample-forked-3ru7k

更多关于overflow CSS 属性的信息你可以在这里阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

溢出 CSS 速记属性为 元素的溢出——即当一个元素的内容太大而无法容纳时 在它的块格式化上下文中——在两个方向上。

<Dialog
          classes={{
            paper: "dialog-paper"
          }}
          open={this.state.open}
          onEnter={console.log("Hey.")}
        >
          <div className="dialog-logo-outside" />
          <DialogTitle>Hello CodeSandbox</DialogTitle>
          <DialogContent>Start editing to see some magic happen!</DialogContent>
        </Dialog>

.dialog-paper {
  overflow: inherit !important;
}