拖动元素时丢失样式

Question

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

拖动之前看起来不错：

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

所以当我拖动它时，input、textarea 和所有表单元素的样式都丢失了。

你能帮我看看样式丢失的原因以及如何修复它吗？

谢谢。

Answer 1

当您拖动元素时，react-sortable-hoc 插件会将此元素附加到 body。如果您的样式中有级联，例如：

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

此样式将不适用，因为在那一刻具有 draggable-element class 的元素不是具有 parent-component class.[=14 的元素的子元素=]