有什么方法可以删除对话框标签中的背景吗？

Question

import React, { useRef } from "react";

import ReviewModal from "@/components/common/ReviewModal";

const Test = () => {
  const dialogRef = useRef<any>();

  return (
    <>
      <dialog ref={dialogRef} className="m-0 p-0">
        <ReviewModal
          onCancel={() => {
            dialogRef.current.close();
          }}
        />
      </dialog>
      <button
        onClick={() => {
          dialogRef.current.showModal();
        }}
      >
        click
      </button>
    </>
  );
};

export default Test;

我将边距和填充值设置为0，但背景仍然保留。我想用一个对话框覆盖整个屏幕。我应该使用什么属性？

Answer 1

您可以使用

::backdrop

css 伪元素来隐藏背景层。

dialog::backdrop {
  display:none
}