React项目Modal组件Backdrop正常渲染但Overlay内容不显示

你遇到的问题和条件渲染、Portal挂载逻辑无关——Backdrop能正常渲染已经证明#overlays挂载节点存在、Portal传送逻辑正常，核心问题出在Modal组件的CSS样式配置错误，这是这类问题的最高发诱因。

1. 核心修复：补全/修正Modal.css样式 #

你给Backdrop和ModalOverlay都设置了class，但大概率没有给元素配置正确的定位、层级属性，导致ModalOverlay要么被遮罩层盖住，要么定位到可视区域外看不到。
直接替换/补全Modal.css内容为以下可运行版本：

/* 遮罩层样式 */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 20;
  background-color: rgba(0, 0, 0, 0.75);
}

/* Modal内容层容器 */
.modal {
  position: fixed;
  top: 20vh;
  left: 5%;
  width: 90%;
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  z-index: 30; /* 必须大于backdrop的z-index，否则会被遮罩覆盖 */
}

/* 内容区 */
.content {
  /* 按需自定义内边距、排版样式即可 */
}

/* 大屏居中适配 */
@media (min-width: 768px) {
  .modal {
    width: 480px;
    left: calc(50% - 240px);
  }
}

重点校验两个属性：

• .backdrop和.modal必须设置position: fixed，默认static定位会让元素跟随正常文档流排布，极易被页面其他元素遮挡
• .modal的z-index值必须大于.backdrop的z-index值，否则内容层会被遮罩层压在下方，视觉上完全看不到

2. 附带逻辑问题修复 #

现有代码里还有两个不影响当前渲染、但后续会触发功能异常的点，可顺手修复：

• Modal组件中Backdrop没有透传关闭事件，后续点击遮罩无法触发关闭逻辑，修改Modal.js中Backdrop的渲染代码：

{ReactDOM.createPortal(<Backdrop onClick={props.onClose} />, portalElement)}

后续使用Modal组件时传入onClose回调即可实现点击遮罩关闭。

• App.js中路由下的同级组件之间多写了多余的逗号，JSX中逗号会被渲染为页面上的冗余文本，删除多余逗号即可：

<Route path="/" exact>
  <Navbar onSearch={getSearchTerm} />
  <Cart/>
  <Middlebar />
  <div className="filter-product row">
    <FilterTab></FilterTab>
    <ProductPage searchTerm={searchedTerm}></ProductPage>
  </div>
</Route>

验证方法 #

修改后打开浏览器开发者工具，切换到Elements面板找到#overlays节点：

• 如果节点下同时存在backdrop和modal两个DOM元素，但页面看不到内容层，直接调整两个元素的z-index和position属性即可100%解决
• 如果缺少modal节点，再回头检查Portal的组件传参是否有拼写错误

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