我正在向图表添加一个 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