模态内容是不呈现的，而背景为 - 可以弄清楚错误

Question

我正在尝试实施推车作为我项目的模态。问题在于，背景正在呈现，但覆盖层没有。已经30分钟了，但是我无法弄清楚错误，而是附加了下面的文件。

目前，模式应一直按照代码呈现，因为我尚未实现条件渲染，但这不是问题，问题是由于某种原因而不是出现覆盖层。

app.js文件

import "./App.css";
import { useState } from "react";
import Middlebar from "./Components/Middlebar";
import FilterTab from "./Components/FilterTab";
import ProductPage from "./Components/ProductPage";
import Navbar from "./Components/Navbar";
import { Route, Switch } from "react-router-dom";
import Data from "./Components/data.json";
import ProductDetail from "./pages/ProductDetail";
import Cart from "./Components/Cart";

function App() {
  const [searchedTerm, setSearchedTerm] = useState("");
  const getSearchTerm = (term) => {
    setSearchedTerm(term);
  };
  return (
    <Switch>
      <Route path="/" exact>
        <Navbar onSearch={getSearchTerm} />,
        <Cart/>,
        <Middlebar />,
        <div className="filter-product row">
          {" "}
          <FilterTab></FilterTab>{" "}
          <ProductPage searchTerm={searchedTerm}></ProductPage>{" "}
        </div>
      </Route>
      <Route path="/product/:id">
        <ProductDetail></ProductDetail>
      </Route>
    </Switch>
  );
}

export default App;

modal.js文件

import { Fragment } from "react";
import ReactDOM from "react-dom";
import "./Modal.css";

const Backdrop = (props) => {
  return <div onClick = {props.onClick} className="backdrop"></div>;
};

const ModalOverlay = (props) => {
  return (
    <div className="modal">
      <div className="content">{props.children}</div>
    </div>
  );
};

const portalElement = document.getElementById("overlays");
export default function Modal(props) {
  return (
    <Fragment>
      {ReactDOM.createPortal(<Backdrop />, portalElement)}
      {ReactDOM.createPortal(
        <ModalOverlay>{props.children}</ModalOverlay>,
        portalElement
      )}
    </Fragment>
  );
}

cart.js文件

import React from "react";
import Modal from "../Modal";
import "./Cart.css";

export default function Cart() {
  return (
    <Modal>
      <div className="total">
        <span>Total</span>
        <span>hi</span>
      </div>
      <div className="actions">
        <button className="button--alt">
          Close
        </button>
        <button className="button">Order</button>
      </div>
    </Modal>
  );
}