Can not apply overlay style using `[cmdk-overlay]` selector

[kevinreber]

Summary

I add some styling to [cmdk-overlay] as recommended in the docs and I'm seeing the styling being applied in the DOM, but I do not see the div for [cmdk-overlay] anywhere in the UI (screenshot)

Here's a short snippet of my code

import React from "react";
import { Input } from "antd";
import { Command } from "cmdk";
import "./CommandKMenu.css";

const CommandKMenu = () => {
  const [inputValue, setInputValue] = React.useState("");
  const [isCmdkMenuOpen, setIsCmdkMenuOpen] = React.useState(false);

  return (
    <div style={{ margin: "auto", minWidth: 100, maxWidth: 400, width: "100%" }}>
      <div style={{ cursor: "pointer", width: "100%" }} onClick={() => setIsCmdkMenuOpen(true)}>
        {/* 🟡 ⬇️ This is just an input that acts as a button to open/close our CMD+K Dialog */}
        <Input prefix={<SearchOutlined />} placeholder="Search pages, services, docs, etc (⌘ + K)" />
      </div>
      <div style={{ position: "relative", minWidth: 100, maxWidth: 600, width: "100%" }}>
        <Command.Dialog
          open={isCmdkMenuOpen}
          onOpenChange={setIsCmdkMenuOpen}
          className="sdi-menu"
        >
          <Command
            ref={ref}
            onKeyDown={.....}
            label="Command Menu"
          >
            <Command.Input
              autoFocus
              placeholder="Search pages, services, docs..."
              onValueChange={(value: string) => {
                setInputValue(value);
              }}
              value={inputValue}
            />
             {/* Route Options..... */}
          </Command>
        </Command.Dialog>
      </div>
    </div>
  );
};

export default CommandKMenu;

[cmdk-overlay] {
  background: red;
}

Am I missing something?

Code Sandbox

Adding a Code Sandbox where I am experiencing the same issue Code Sandbox link: https://codesandbox.io/s/cmdk-dialog-forked-rrh7vc

[pacocoursey]

Yes, you are missing styles that render the overlay over the entire page, which you must provide manually (not all overlays are equal). For example, to cover the entire screen you likely want the following styles:

position: fixed;
inset: 0;