图表上的菜单下拉菜单被抵消

abc 发表于 Dev

美国广播公司

我正在向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

编辑

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

这是完整的代码和框：

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

麦克冯

更新

针对菜单列表位置问题，可以利用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>
...

该更新Codesandbox

空白是由foreignObject's触发的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>
...

这是修改后的代码和框

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。