图表上的菜单下拉菜单正在偏移

Question

我正在向图表添加一个chakra-ui 菜单下拉按钮（来自react-financial-charts，这是一个基于svg 构建的库）。

由于某种原因，当我单击菜单时，按钮和下拉菜单之间会有空格。这只发生在我将菜单放到图表上时。如果我在浏览器中有独立的菜单，它将按预期工作。

这是菜单代码：

function TestMenu() {
  return (
    <g className="react-financial-charts-enable-interaction">
      <foreignObject
        x={30}
        y={30}
        width={"100%"}
        height={"100%"}
        style={{ overflow: "auto" }}
      >
        <Menu>
          <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
            Actions
          </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>
      </foreignObject>
    </g>
  );
}

这是完整的代码框：

https://codesandbox.io/s/nervous-haze-3mz2c?file=/src/BasicLineSeries.tsx:511-1199

编辑

如果我从foreignObject 中删除x={0} 和y={0} 并将style={{ marginTop: "30px", marginLeft: "30px" }} 包含到MenuButton 中，如其中一个答案所建议的那样，这将解决问题只有在图表位于页面顶部。否则，如果图表前有div，则会出现这种情况：

这是完整的代码框：

https://codesandbox.io/s/nostalgic-pare-c5rxu?file=/src/BasicLineSeries.tsx

Answer 1

更新

根据菜单列表位置问题，可以利用Portal将整个列表选项移动到DOM底部，使其样式不受Chart内部任何样式/组件的影响。

...
<Menu>
  <MenuButton
    as={Button}
    rightIcon={<ChevronDownIcon />}
    transition="all 0.001s"
    borderRadius="md"
    borderWidth="0px"
    _hover={{ bg: "gray.400" }}
    _expanded={{ bg: "blue.400" }}
    _focus={{ boxShadow: "none" }}
    style={{ marginTop: "30px", marginLeft: "30px" }} // better move the style to css file 
  >
    Actions
  </MenuButton>
  <Portal>
    <MenuList zIndex={10}>
      <MenuItem>Download</MenuItem>
      <MenuItem>Create a Copy</MenuItem>
      <MenuItem>Mark as Draft</MenuItem>
      <MenuItem>Delete</MenuItem>
      <MenuItem>Attend a Workshop</MenuItem>
    </MenuList>
  </Portal>
</Menu>
...

Updated Codesandbox

---

空白由foreignObject 的x 和y 触发，其中MenuList 尊重foreignObject 中指定的空间。 （你可以尝试增加x和y，你会看到按钮和菜单列表之间的差距更大）

要解决此问题，您可以删除x 和y 并在MenuButton 上应用边距

...
<foreignObject
  width={"100%"}
  height={"100%"}
  style={{ overflow: "auto" }}
>
  <Menu>
    <MenuButton
      as={Button}
      rightIcon={<ChevronDownIcon />}
      transition="all 0.001s"
      borderRadius="md"
      borderWidth="0px"
      _hover={{ bg: "gray.400" }}
      _expanded={{ bg: "blue.400" }}
      _focus={{ boxShadow: "none" }}
      style={{ marginTop: "30px", marginLeft: "30px" }} // better move the style to css file
    >
      Actions
    </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>
</foreignObject>
...

这里是the modified codesandbox