2

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

在此处输入图像描述

这是完整的代码框：

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

4

1 回答 1

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

更新的代码沙盒

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

要解决此问题，您可以删除xandy并应用边距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>
...

这是修改后的代码框

于 2021-07-26T02:22:14.193 回答