Ant Design Modal对话框样式设置

Ant Design Modal对话框样式设置

• Modal对话框官方文档：对话框 Modal - Ant Design

• 样式使用插件：styled-components
• 注意需要设置getContainer：

• 示例：

• index.tsx:

import React from 'react'
import { Modal } from 'antd'

import { AntModalWrapper } from './style'

interface propstype {
  visible: boolean
  setVisible: (visible: boolean) => void
}

const antmodal = (props: propstype) => {
  const { visible, setVisible } = props
  return (
    <AntModalWrapper>
      <Modal
        centered
        getContainer={false}
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        width={1000}
        footer={null}
      >
        <p>some contents...</p>
        <p>some contents...</p>
        <p>some contents...</p>
        <p>some contents...</p>
        <p>some contents...</p>
        <p>some contents...</p>
        <p>some contents...</p>
        <p>some contents...</p>
        <p>some contents...</p>
      </Modal>
    </AntModalWrapper>
  )
}

export default antmodal

• style.js:

import styled from 'styled-components'

export const AntModalWrapper = styled.div`
  .ant-modal-content {
    padding: 0px 20px;
    background-color: #fff;
    border-radius: 30px;
    /* box-shadow: 0 0 0 0 transparent; */
    color: #00f;
    p {
      font-size: 18px;
      font-weight: 600;
    }
  }
`

• 效果：