reactjs - 拖动元素时丢失样式

Question

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

在拖动它之前看起来不错：

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

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

你能帮我为什么样式丢失以及如何修复它吗？

谢谢你。

Answer 1

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

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

这种风格将不适用，因为在那一刻，带有draggable-element类的元素不是带有类的元素的子元素parent-component。