material-ui的Popper组件中使用箭头的例子

Question

Material-ui 的 Popper 组件页面上有 Playground 示例。要添加箭头，他们使用 arrowRef。请解释我从哪里得到它？

Answer 1

您可以在此处找到 Material UI Popper“Scroll Playgroud”示例的源代码：https : //github.com/mui-org/material-ui/blob/4f2a07e140c954b478a6670c009c23a59ec3e2d4/docs/src/pages/components/popper/ScrollPlayground。 js

如您所见，您需要将一些额外的样式添加到您的应用程序中才能正确显示箭头，因为它不包含在 Material UI 库本身中。

Answer 2

对于其他人正在寻找一个具体的，可重用的组件，该组件易于使用，Tooltip但具有更具交互性的性质，例如，Popper或者Popover您可以RichTooltip从我创建的以下沙箱中提升和移动组件 - 它也是打字稿。希望这可以帮助下一个人并为您隐藏箭头的复杂性。

https://codesandbox.io/s/popper-with-arrow-58jhe

Answer 3

对于其他需要它的人，OP正在询问Material-UI Poppers。

德米特里，

将React Refs视为一个始终引用 DOM 外部元素（如果呈现）的变量。React 最佳实践通常是尽可能远离 DOM。当然也有例外，但这是经验法则。

在这个特定的实例中，他们似乎在其他地方创建一个元素并使用 ref 引用它，以便 Popper 可以使用它。我在这里找到了一个例子。读起来有点困难，但要点是他创建了一个跨度并按照他想要的应用方式设置了样式。