antd design 模态打开时闪烁

Question

我在我的 React 应用程序中使用 antd design。我注意到 antd design 模态在打开时闪烁。

有什么办法可以解决这个问题吗？

我按照https://ant.design/components/modal/的说明进行操作

我没有这方面的代码笔，但我已经按照以下方式编写了所有模态，并且我正在使用 antd design 的 css。

          <Modal
          visible={visible}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" size="large" onClick={this.handleCancel}>Return</Button>,
            <Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
              Submit
            </Button>,
          ]}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>

Answer 1

我从来没有发生过。您是否在开发人员工具中检查了可能导致此问题的任何 CSS？例如，当我使用模态时，我的背景变暗。当我检查 ant 的一个默认类（根本不需要。它是一个包装器 div，包装了实际的模态 div）时，它有深色背景，因此发生了这种情况。因此，通过设置background: transparent;I 可以解决该问题。但后来我发现了这个：

mask = {false}

这将进入您的模态声明。像这样的东西：

         <Modal
          visible={visible}
          mask = {false}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" size="large" onClick={this.handleCancel}>Return</Button>,
            <Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
              Submit
            </Button>,
          ]}
        >

所以试试吧。这可能会解决你的问题。