reactjs - 使用自定义组件时，Emotion Styled 组件不会触发 dragEnd 事件

Question

我正在尝试结合三种技术：

• 情感风格的组件
• 反应-dnd
• 自定义元素微前端

使样式化的组件与自定义元素一起工作需要一个在这里找到的 shadow dom 容器，它允许我将样式应用于微前端内的组件。

我的问题是，当使用带有样式组件的 react dnd 时，可以拖动元素并且被检测为已拖动，但是当拖动停止时不会触发 react dnd collect 方法。不知何故，必须丢失一个事件，我无法弄清楚哪个事件以及它丢失的原因。

我在这里建立了一个示例 正如您所见，当拖动停止时，常规样式的蓝卡会重新出现。但是绿卡会消失，直到蓝卡被拖走。

记录 dragEnd 事件，两个组件都会在拖动开始时触发 dragEnd。但是，当拖动停止时，常规组件会触发另一个 dragEnd，而样式化组件不会触发一个，直到再次拖动另一个常规组件。

自定义元素是应用程序的硬性要求。我正在尝试使用 Emotion JS，因为我们当前使用 Material UI makeStyles 的解决方案在计算复杂样式时性能非常差。

我将不胜感激任何帮助

标签： reactjsemotionreact-dndmicro-frontend