За исключением заголовка в модальной маске - PullRequest
Новая
       35

За исключением заголовка в модальной маске

0 голосов
/ 22 сентября 2018

Когда я создаю модал с использованием Ant Design, он делает весь фон, включая заголовок, серым, как это:

image1

Но я хочупримерно так:

image2

Вот фрагмент , а вот упрощенный код: 

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

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

Как я должен сделать?

Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 22 сентября 2018

Как вы можете видеть при просмотре модального кода, ant-modal-wrap (эффект темной тени) имеет z-index, установленный на 1000.

Это означает, что если заголовок больше z-index, он появится перед ant-modal-wrap.

Попробуйте это: 

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

Конечно, в соответствии с документацией , вы всегда можете изменить z-index модального (значение по умолчанию 1000, как упомянуто выше).) используя свойство zIndex.Затем вы можете настроить оба по своему вкусу, важно, чтобы заголовки z-index были больше, так как вы хотите, чтобы они отображались сверху.

0 голосов
/ 22 сентября 2018

Из документации API

maskStyle Стиль элемента модальной маски.

Вы можете использовать свойство maskStyle для настройкифон, например 

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

Если вы хотите сохранить фон и не накладывать заголовок: 

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