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

Question

我只希望模式的最大宽度为 1200px，如果屏幕宽度小于 1200px，则为 100% 宽度。我试过使用 style={{maxWidth: "1200px"}} 但这不起作用，并且在 Ant Design 文档中没有说明如何执行此操作。感谢您的帮助！

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);
});

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

How to resize width of Ant Design modal based on different screen sizes?

jsx

reactjs

antd