如何根据不同的屏幕尺寸调整Ant Design modal的宽度？

Question

我只希望模式的最大宽度为 1200 像素，如果屏幕宽度小于 1200 像素，则为 100% 宽度。 我尝试使用style={{maxWidth: "1200px"}}但这不起作用，并且在 Ant 设计文档中没有说明如何执行此操作。 任何帮助表示赞赏！

 import React, { useState } from 'react'; import { Modal, Button } from 'antd'; const App = () => { const [isModalVisible, setIsModalVisible] = useState(false); const showModal = () => { setIsModalVisible(true); }; const handleOk = () => { setIsModalVisible(false); }; const handleCancel = () => { setIsModalVisible(false); }; return ( <> <Button type="primary" onClick={showModal}> Open Modal </Button> <Modal style={{maxWidth: "1200px"}} title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} > <p>Some contents...</p> <p>Some contents...</p> <p>Some contents...</p> </Modal> </> ); }; ReactDOM.render(<App />, mountNode);

Answer 1

添加此代码并使用 maxModalSize 值

const [maxModalSize, setMaxModalSize] = useState(1200);
const resize = () => {
    const maxSize = Math.min(1200, window.innerWidth);
    setMaxModalSize(maxSize);
};

useEffect(() => {
    window.addEventlistener("resize", resize);
    return () => window.removeEventlistener("resize", resize);
});