模态蒙版中的标头除外

Question

当我使用Ant Design制作模态时，它将使所有背景（包括标题）变为灰色：

但是我想要这样的东西：

这里是a snippet，下面是简化代码：

import { Layout, Modal } from "antd";
const { Header } = Layout;

class App = () => (
  <Layout>
    <Header>My header</Header>
    <Modal visible={true}>My modal<Modal>
  </Layout>
);

我该怎么办？

谢谢您的帮助。

Answer 1

摘自API文档

  

maskStyle模态蒙版元素的样式。

您可以使用maskStyle属性来调整背景，例如

<Modal maskStyle={{backgroundColor: "inherit"}} visible={true}>
   My modal
</Modal>

但是，如果您想保留背景而不覆盖页眉：

<Modal maskStyle={{top: "90px"}} visible={true}>

Answer 2

正如您在查看模态代码时所看到的，ant-modal-wrap（暗影效果）的z-index设置为1000。

这意味着给标题更大的z-index会使标题显示在ant-modal-wrap的前面。

尝试一下：

<Header style={{backgroundColor: "red", color: "black", zIndex:1001}}>My header</Header>

当然，根据documentation，您始终可以使用z-index属性来修改模态的zIndex（如上所述，默认值为1000）。然后，您可以根据自己的喜好进行调整，重要的是标头z-index应该更大，因为您希望标头显示在顶部。