拖动元素时丢失样式

Question

我在React.js中开发了一个项目，在其中我将react-sortable-hoc插件用于拖动元素。我想拖动带有输入的部分。

拖动之前看起来不错：

如果我拖动元素，它看起来像这样：

因此，拖动时输入，文本区域和所有表单元素中的样式都会丢失。

您能帮我为什么样式丢失以及如何解决吗？

谢谢。

Answer 1

拖动元素时，react-sortable-hoc插件将此元素附加到body。如果您的样式具有层叠样式，例如：

.parent-component .draggable-element {
 // some styles
}

此样式将不适用，因为在那一刻，draggable-element类元素不是子元素parent-component。