Javascript 使antd模式全屏无任何填充或边距
我是编程新手。在这里,我有一个antd模式,我一直试图找到一种方法,使其全屏。我希望模态是全屏幕的,当它被打开时,它不应该有任何空白或填充物。例如,在代码中,我添加了Javascript 使antd模式全屏无任何填充或边距,javascript,html,css,reactjs,antd,Javascript,Html,Css,Reactjs,Antd,我是编程新手。在这里,我有一个antd模式,我一直试图找到一种方法,使其全屏。我希望模态是全屏幕的,当它被打开时,它不应该有任何空白或填充物。例如,在代码中,我添加了width={1000},但在模式的左右两侧仍然有一些边距 那么,我如何使模态在没有任何边距和填充的情况下占据整个屏幕呢 代码: 您需要取消设置模态的max width和margin 您需要在类的伪元素之前在中取消设置内容 工作 从代码文件中删除模式宽度的固定值和居中属性: index.js import React, { use
width={1000}
,但在模式的左右两侧仍然有一些边距
那么,我如何使模态在没有任何边距和填充的情况下占据整个屏幕呢
代码:
max width
和margin
类的伪元素之前在中取消设置内容
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Modal, Button } from 'antd';
const App = () => {
const [visible, setVisible] = useState(false);
return (
<>
<Button type="primary" onClick={() => setVisible(true)}>
Open Modal of 1000px width
</Button>
<Modal
title="Modal 1000px width"
// This was removed
// centered
visible={visible}
onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}
// This was removed
// width={'1000'}
>
<p>some contents...</p>
<p>some contents...</p>
<p>some contents...</p>
</Modal>
</>
);
};
ReactDOM.render(<App />, document.getElementById('container'));
.ant-modal-centered::before {
content: unset;
}
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Modal, Button } from 'antd';
const App = () => {
const [visible, setVisible] = useState(false);
return (
<>
<Button type="primary" onClick={() => setVisible(true)}>
Open Modal of 1000px width
</Button>
<Modal
title="Modal 1000px width"
// This was removed
// centered
visible={visible}
onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}
// This was removed
// width={'1000'}
>
<p>some contents...</p>
<p>some contents...</p>
<p>some contents...</p>
</Modal>
</>
);
};
ReactDOM.render(<App />, document.getElementById('container'));
.ant-modal, .ant-modal-content {
height: 100vh;
width: 100vw;
margin: 0;
top: 0;
}
.ant-modal-body {
height: calc(100vh - 110px);
}