调整React Bootstrap Modal body位置后仍显示白框的解决求助

问题原因 #

残留的白框是React Bootstrap <Modal> 组件默认外层.modal-content容器自带的默认样式，包含白色背景、默认边框、阴影和内边距，你仅修改了内层<Modal.Body>的样式，外层容器的默认样式未被覆盖，所以留下了白框。

解决方案 #

给<Modal>组件添加contentClassName属性，清除外层容器的默认背景、边框、阴影和内边距即可，修改后代码如下：

import React,{useState} from 'react';
import {Modal} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const Popup = () => {
    const [show, setShow] = useState(true);
    const handleClose = () => setShow(false);
  
  return (
    <>
      <Modal 
        show={show} 
        onHide={handleClose}
        {/* 清除modal外层容器默认样式 */}
        contentClassName="bg-transparent border-0 shadow-none p-0"
      >
        <Modal.Body className="bg-black absolute top-44">
          <input className="pl-2 py-1" placeholder="search..."/>
        </Modal.Body>
      </Modal>
    </>
  );
}

export default Popup

可选扩展配置 #

• 如果不需要Modal默认的半透明遮罩层，可以给<Modal>添加backdrop="false"属性
• 如果需要调整遮罩层样式，可以使用backdropClassName属性自定义

问题效果参考 #

内容的提问来源于stack exchange，提问作者SaiNaveen