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

【问题标题】：Example of using arrow in Popper component of material-uimaterial-ui的Popper组件中使用箭头的例子
【发布时间】：2019-08-14 18:40:22
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

德米特里，

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

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

【讨论】：

我在好几个地方都看到过这种风格的箭头，但没想到它本身就是箭头！！我的意思是完全出乎意料的效果（至少对我来说），设置零高度和宽度以及非零边框会带来一个箭头。你能不能解释一下，为什么他们在你的示例代码中为 StyledPopper 标记模板文字的开头使用 && ？
我实际上从未见过它，但这显然是一种提高类名以覆盖内联样式的方法。 medium.com/@pitipatdop/…
我在 styled-components FAQ 中找到了解释。目的是提高规则的特异性。每个 & 成为一个生成的类名选择器。
还有一个问题。上述示例中 &:before 子句的原因是什么？我尝试在操场上更改此选择器下的规则 - 没有任何改变。
查看 DOM，我没有看到任何 :before 伪选择器应用。看来您可以放心地不使用该样式的那部分。