SOURCE

const Modal = ({
    visible,
    title,
    onOk,
    onCancel,
    cancelText,
    okText,
    width,
    style,
    children
}) => {
    return <React.Fragment>
        {
            visible &&
            <div className='ly-modal' style={{ ...style, width }}>
                <div>{title}</div >
                <div>{children}</div>
                <button onClick={onCancel}>{cancelText}</button>
                <button onClick={onOk}>{okText}</button>
            </div>
        }
    </React.Fragment>

}
Modal.defaultProps = {
    width: 200,
    visible: false,
    title: 'title',
    onOk: () => { },
    onCancel: () => { },
    cancelText: '取消',
    okText: '确定',
}
Modal.propTypes = {
    visible: PropTypes.bool,
    title: PropTypes.string,
    cancelText: PropTypes.node,
    okText: PropTypes.node,
    onCancel: PropTypes.func,
    onOk: PropTypes.func,
}

function App() {
    const [visible, setVisible] = React.useState(false)
    return (
        <div>
            <h2>Modal</h2>
            <Modal
                visible={visible}
                title={'标题'}
                okText={<span style={{color:'red'}}>确定</span>}
                onOk={() => setVisible(false)}
                onCancel={() => setVisible(false)}
            >
                <div>内容</div>
            </Modal>
            <button onClick={() => {
                setVisible(v => !v)
            }}>Open Modal</button>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root">
  <!-- This element's contents will be replaced with your component. -->
</div>

.ly-modal{
    background-color: white;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%, -50%);
}