createPortalで、モーダルを親要素の外に描画する方法

import { type ReactNode } from 'react';
import { createPortal } from 'react-dom';

type Props = { title: string; onClose: () => void; children: ReactNode };

// 画面の上に重ねて出すダイアログ（ポータルを使わない版）
export function InlineModal({ title, onClose, children }: Props) {
  return (
    <div className="backdrop">
      <div className="modal" role="dialog" aria-modal="true" aria-label={title}>
        <h3>{title}</h3>
        {children}
        <button className="close" onClick={onClose}>閉じる</button>
      </div>
    </div>
  );
}

// 同じダイアログを、createPortal で document.body の中に描画する版
export function PortalModal(props: Props) {
  return createPortal(<InlineModal {...props} />, document.body);
}

export function Card({ usePortal }: { usePortal: boolean }) {
  const [open, setOpen] = useState(false);
  const Modal = usePortal ? PortalModal : InlineModal;

  return (
    <div className="card">
      <p>{usePortal ? 'createPortal あり' : 'createPortal なし'}</p>
      <button className="open" onClick={() => setOpen(true)}>ダイアログを開く</button>
      {open && (
        <Modal title="確認" onClose={() => setOpen(false)}>
          <p>この内容で保存しますか？</p>
        </Modal>
      )}
    </div>
  );
}

=== createPortal なし
開いたあと: .backdrop の親=div.card / .card の中か=true
body の子要素: div#root
閉じたあと: ダイアログなし
=== createPortal あり
開いたあと: .backdrop の親=body / .card の中か=false
body の子要素: div#root, div.backdrop
閉じたあと: ダイアログなし

overflow だけ / card-inline: {"modal":"300x128 @(90,96)","backdrop":"480x320 @(0,0)","centerIsModal":true}
overflow だけ / card-portal: {"modal":"300x128 @(90,96)","backdrop":"480x320 @(0,0)","centerIsModal":true}
overflow + transform / card-inline: {"modal":"300x128 @(90,42)","backdrop":"444x92 @(18,60)","centerIsModal":false}
overflow + transform / card-portal: {"modal":"300x128 @(90,96)","backdrop":"480x320 @(0,0)","centerIsModal":true}

const logs: string[] = [];
const Theme = createContext('light');

// ポータルの中のボタン。stop が true なら、クリックの伝わりをここで止める
function PortalButton({ stop }: { stop: boolean }) {
  const theme = useContext(Theme);
  return createPortal(
    <div className="modal">
      <button
        className="inner"
        onClick={(e) => {
          logs.push(`ポータルの中のボタン onClick（テーマ=${theme}）`);
          if (stop) e.stopPropagation();
        }}
      >
        OK
      </button>
    </div>,
    document.body,
  );
}

function Parent({ stop }: { stop: boolean }) {
  const divRef = useRef<HTMLDivElement>(null);
  const [clicks, setClicks] = useState(0);
  useEffect(() => {
    // 比べるために、同じ div に DOM の addEventListener でもクリックを待つ
    const div = divRef.current!;
    const onNative = () => logs.push('親の div の addEventListener');
    div.addEventListener('click', onNative);
    return () => div.removeEventListener('click', onNative);
  }, []);
  return (
    <Theme value="dark">
      <div className="parent" ref={divRef} onClick={() => { logs.push('親の div の onClick'); setClicks((c) => c + 1); }}>
        <p className="clicks">親が受け取ったクリック：{clicks}回</p>
        <PortalButton stop={stop} />
      </div>
    </Theme>
  );
}

=== stopPropagation なし
ボタンは .parent の中か: false
ポータルの中のボタン onClick（テーマ=dark）
親の div の onClick
親の div の addEventListener が呼ばれた回数: 0
親が受け取ったクリック：1回
=== stopPropagation あり
ボタンは .parent の中か: false
ポータルの中のボタン onClick（テーマ=dark）
親の div の addEventListener が呼ばれた回数: 0
親が受け取ったクリック：0回

#modal-root があるか: false
エラー: Target container is not a DOM element.
#modal-root を作ったあと: true
#modal-root の中身: <p>ダイアログ</p>