ReactDOM.createPortal modal is mounted on DOM but nothing is displayed on the screen

问题

this is a typescript-next.js project. I have this Modal component:

interface ModalProps {
  onCancelModal: () => void;
  onAcceptModal: () => void;
  acceptEnabled: boolean;
  isLoading?: boolean;
  title: string;
}

const Modal: React.FC<ModalProps> = (props) => {
  let containerRef = useRef<HTMLDivElement | null>(null);
  console.log("container", containerRef);
  useEffect(() => {
    const rootContainer = document.createElement("div");
    const parentElem = document.querySelector("#__next");
    parentElem?.insertAdjacentElement("afterend", rootContainer);
    if (!containerRef.current) {
      containerRef.current = rootContainer;
    }
    return () => rootContainer.remove();
  }, []);
  return containerRef.current
    ? ReactDOM.createPortal(
        <div className="modal">
          <header className="modal__header">
            <h1>{props.title}</h1>
          </header>
          <div className="modal__content">{props.children}</div>
          <div className="modal__actions">
            <Button design="danger" mode="flat" onClick={props.onCancelModal}>
              Cancel
            </Button>
            <Button
              mode="raised"
              onClick={props.onAcceptModal}
              disabled={!props.acceptEnabled}
              loading={props.isLoading}
            >
              Accept
            </Button>
          </div>
        </div>,
        containerRef.current
      )
    : null;
};

export default Modal;

I pass a custom error to ErrorHandler component:

const ErrorHandler: React.FC<ErrorHandlerProps> = (props) => (
  <Fragment>
    {props.error && <Backdrop onClick={props.onHandle} />}
    {props.error && (
      <Modal
        title="An Error Occurred"
        onCancelModal={props.onHandle}
        onAcceptModal={props.onHandle}
        acceptEnabled
      >
        <p>{props.error}</p>
      </Modal>
    )}
  </Fragment>
);

However, Modal component is successfully mounted on the DOM but nothing displays on the screen.

EDIT I have backdrop and modal components.

// css for backdrop
.backdrop {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  transition: opacity 0.3s ease-out;
  opacity: 1;
}

// css for Modal
.modal {
  position: fixed;
  width: 90%;
  left: 5%;
  top: 20vh;
  background: white;
  border-radius: 5px;
  z-index: 200;// I changed this to 999999 but didnot solve the issue
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}

.modal__header {
  border-bottom: 2px solid #3b0062;
}

.modal__header h1 {
  font-size: 1.5rem;
  color: #3b0062;
  margin: 1rem;
}

.modal__content {
  padding: 1rem;
}

.modal__actions {
  padding: 1rem;
  text-align: right;
}

.modal__actions button {
  margin: 0 0.5rem;
}

@media (min-width: 768px) {
  .modal {
    width: 40rem;
    left: calc((100% - 40rem) / 2);
  }
}

回答1:

I found the answer after i refresh my memory. I realized that there is another .modal className on elements-styles tab. It points me to the /node_modules/bootstrap/scss/_modal.scss file which also has modal className and it was overriding my custom className.

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $zindex-modal;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;
  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
  // See also https://github.com/twbs/bootstrap/issues/17695
}

来源：https://stackoverflow.com/questions/65914360/reactdom-createportal-modal-is-mounted-on-dom-but-nothing-is-displayed-on-the-sc