Chakra UI で Menu や Popover で表示される謎のスペースをなくす方法

こんにちは 👋
先日、Chakra UI を使っているときに Menu や Popover で生まれる絶妙なスペースを消したい場面に遭遇して、その解決方法を探すのに苦労したので、今回はその方法を備忘録的に残したいと思います！

やりたいこと

ソースコードは以下です。説明のためにそれぞれ isOpen={true} を指定しています。

App.tsx

import { ChevronDownIcon } from "@chakra-ui/icons";
import {
  Button,
  Flex,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  Popover,
  PopoverBody,
  PopoverCloseButton,
  PopoverContent,
  PopoverHeader,
  PopoverTrigger,
} from "@chakra-ui/react";

function App() {
  return (
    <Flex w="100vw" px={10} pt={5} gap={"300px"}>
      <Menu isOpen={true}>
        <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
          Menu
        </MenuButton>
        <MenuList>
          <MenuItem>Download</MenuItem>
          <MenuItem>Create a Copy</MenuItem>
          <MenuItem>Mark as Draft</MenuItem>
          <MenuItem>Delete</MenuItem>
          <MenuItem>Attend a Workshop</MenuItem>
        </MenuList>
      </Menu>
      <Popover isOpen={true}>
        <PopoverTrigger>
          <Button>Popover</Button>
        </PopoverTrigger>
        <PopoverContent>
          <PopoverCloseButton />
          <PopoverHeader>Confirmation!</PopoverHeader>
          <PopoverBody>
            Are you sure you want to have that milkshake?
          </PopoverBody>
        </PopoverContent>
      </Popover>
    </Flex>
  );
}

export default App;

解決方法

解決方法は簡単で、<Menu />、<Popover /> に offset={[0, 0]} を指定してあげることで解決できます！

App.tsx

import { ChevronDownIcon } from "@chakra-ui/icons";
import {
  Button,
  Flex,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  Popover,
  PopoverBody,
  PopoverCloseButton,
  PopoverContent,
  PopoverHeader,
  PopoverTrigger,
} from "@chakra-ui/react";

function App() {
  return (
    <Flex w="100vw" px={10} pt={5} gap={"300px"}>
      <Menu isOpen={true} offset={[0, 0]}>
        <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
          Menu
        </MenuButton>
        <MenuList>
          <MenuItem>Download</MenuItem>
          <MenuItem>Create a Copy</MenuItem>
          <MenuItem>Mark as Draft</MenuItem>
          <MenuItem>Delete</MenuItem>
          <MenuItem>Attend a Workshop</MenuItem>
        </MenuList>
      </Menu>
      <Popover isOpen={true} offset={[0, 0]}>
        <PopoverTrigger>
          <Button>Popover</Button>
        </PopoverTrigger>
        <PopoverContent>
          <PopoverCloseButton />
          <PopoverHeader>Confirmation!</PopoverHeader>
          <PopoverBody>
            Are you sure you want to have that milkshake?
          </PopoverBody>
        </PopoverContent>
      </Popover>
    </Flex>
  );
}

export default App;

すると、こんな感じにスペースがなくなります。

最後に

以上で終わりになります！

それにしても、こういう言語化しにくい問題の検索の仕方って難しいですね 🤔
そして記事のタイトルの付け方も難しい！

同じ問題で困っている人がしっかりこの記事に辿り着けますように 🙏

それでは 👋