Modal 框（带表单）

import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {Input, Button, Modal} from 'antd';
import noticeStore from '@stores/Notice';
import {toJS} from 'mobx';
import style from './style.less';

@observer
export default class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    async componentDidMount() {}

    handleChange = (val, type) => {
        this.setState({[type]: val});
    };

    render() {
        return (
            <Modal
                width={460}
                title={`重命名`}
                wrapClassName={style.rename}
                maskClosable={false}
                visible={true}
                onCancel={this.handleCancel}
                footer={[
                    <Button onClick={this.handleCancel} className={style.cancel} key={1}>
                        取消
                    </Button>,
                    <Button onClick={this.handleSave} key={2} type="primary">
                        保存
                    </Button>
                ]}>
                <div className={style.content}>
                    <div className={style.list}>
                        <div className={style.list_name}>
                            <span className={style.required}>*</span>
                            <span>常用筛选名称：</span>
                        </div>
                        <div className={style.list_form}>
                            <Input onChange={e => this.handleChange(e.target.value, '')} placeholder="请输入常用筛选名称" />
                        </div>
                    </div>
                </div>
            </Modal>
        );
    }
}

// less
.rename {
    .content {
        .list {
            display: flex;
            align-items: center;
            margin-bottom: 16px;

            .list_name {
                > span {
                    color: #333333;
                }

                .required {
                    color: rgba(255, 2, 2, 0.9);
                }
            }

            .list_form {
                :global {
                    .ant-input {
                        width: 305px;
                    }
                }
            }
        }

        .list:last-child {
            margin-bottom: 0;
        }
    }

    .cancel {
        background-color: white;

        > span {
            color: #333333;
        }
    }
    :global {
        .ant-modal-body {
            padding: 24px;
        }
    }
}