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

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的底部，使其样式不会受到任何style/component 在图表内。

...
<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

白色 space 由 foreignObject 的 x 和 y 触发，其中 MenuList 与指定的 space 相关在 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

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

Menu's dropdown on Chart is being offset

svg

typescript

reactjs

foreignobject

chakra-ui