react如何自定义Ant Design对话框Modal的样式

阿湫

已于 2022-08-02 16:19:03 修改

阅读量8.8k

点赞数 7

分类专栏： React学习文章标签：前端 javascript css

于 2022-07-17 08:46:29 首次发布

本文链接：https://blog.csdn.net/qq_51247028/article/details/125824163

版权

React学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、效果展示：

在这里插入图片描述

二、具体实现：

1. 在官方api中写到，可以为Modal添加类名，那这样就可以通过类选择器给对话框设置样式了

在这里插入图片描述

2. 再来看一下Modal的结构、整个页面的class是ant-modal-content

ruge

在DevTools中选中对话框，可以看到整个Modal由header、body、footer，还有右上角的叉叉构成
以及他们对应的类名
在这里插入图片描述

3. 去掉header（即title）和footer
这里不需要通过类名去设置样式，可以直接在< Modal >标签里设置 title={null} footer={null}
效果是这样的
在这里插入图片描述

4. 修改body样式
在这里我们为Modal定义一个类名 wrapClassName={‘weipay’}
注意：这里子元素body和父元素content大小一致

根据需求，需要给body设置边框圆角以及背景图片
就可通过wrapClassName以及ant-modal-content、ant-modal-body来修改样式

过程是这样的
先为body添加上背景图
在这里插入图片描述

然后设置圆角，这里可以看到背景即父元素content是白色的
在这里插入图片描述

将背景设为透明
在这里插入图片描述

三、详细代码

Ps：上面展示部分是直接在antd官网修改的，下面的代码是文章开头的那张图片的实现

html部分

<Modal
   width='1000px'
   title={null}
   footer={null}
   visible={visible}
   onOk={this.hideModal}
   onCancel={this.hideModal}
   maskClosable={false} //点击蒙版不允许关闭，防止误触
   wrapClassName={'weipay'} //为对话框设置类名，用来修改modal样式
>
   <div maxWidth={1000}>
       <div style={{ height: 360, padding: '30px' }} >
           <Row>
              <Col xl={16}>
                 <div className='leftintro'>
                   <p style={{ fontSize: '22px', marginTop: '17%', color: '#eee' }}>请扫描二维码进行会员认证，支付成功后完成注册</p>
                   <div style={{ margin: '0 auto' }}>
                     <p style={{ fontSize: '18px', marginTop: '10%', marginLeft: '13%', color: '#eee' }}>请在<span style={{ fontSize: '20px', color: 'red' }}>&nbsp;30&nbsp;</span>秒内完成支付，否则需要重新提交</p>
                   </div>
                 </div>
              </Col>
              <Col xl={8} >
                 <QRCode
                   value={qrcode}
                   size={200} //二维码的宽高尺寸
                   fgColor="#000"  //二维码的颜色
                 />
                 <div style={{ width: 240, height: 100, marginTop: '14%', marginLeft: '24%' }}>
                   <div style={{ width: 60, height: 60, float: 'left', marginTop: '4%' }} className='wxlogo'></div>
                   <div style={{ width: 160, height: 160, float: 'left', marginTop: '-17%' }} className='wcp'></div>
                 </div>
              </Col>
           </Row>
       </div>
   </div>
</Modal>

css部分

.weipay .ant-modal-content {
    background-color: rgb(0, 0, 0, 0); /* 将背景设置为透明 */
}
.weipay .ant-modal-body {
    background-image: url("../../../../../../public//pic//weipay.png");
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 30px;
}