reactjs - ReactDOM.createPortal modal 挂载在 DOM 上，但屏幕上没有显示任何内容

Question

这是一个 typescript-next.js 项目。我有这个模态组件：

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;

我将自定义错误传递给 ErrorHandler 组件：

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>
);

但是，Modal 组件已成功安装在 DOM 上，但屏幕上没有显示任何内容。

编辑 我有背景和模态组件。

// 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);
  }
}

标签： reactjstypescriptmodal-dialognext.jsreact-portal

Answer 1

刷新记忆后我找到了答案。我意识到.modal元素样式选项卡上有另一个类名。它指向我/node_modules/bootstrap/scss/_modal.scss也有类名的文件，modal它覆盖了我的自定义类名。

.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
}