is any method remove backdrop in dialog tag?

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;

I set the margin and padding values ​​to 0, but the backdrop still remains. I want to cover the entire screen with a dialog. What properties should I use?

Answer 1

You can use ::backdrop css pseudo element to hide backdrop layer.

dialog::backdrop {
  display:none
}