Losing style of tr element when being dragged with react-sortable-hoc

Question

My issue is that the style of the selected element is lost while dragging. I am using the react-sortable-hoc library, which doesn't give information on that. Their examples do not have this issue. The style always stays the same as the original item.

<tbody>
    {items.map((value, index) => (
    <SortableItem key={`item-${value.code}`} index={index} sortIndex={index} value={value} />
    ))}
</tbody>

---

const SortableItem = SortableElement(({value, sortIndex}) => (
        <tr>
            <DragHandle sortIndex={sortIndex}/>
            <td>{value.label}</td>
            <td>{value.beta.toString()}</td>
            <td>{value.prod.toString()}</td>
            <td>{value.hidden.toString()}</td>
        </tr>
    ));

---

        const DragHandle = SortableHandle(({sortIndex}) => <td>{sortIndex}</td>);

Here is my list before I select and drag an element.

And here is my list when I select and start dragging the first element.

Answer 1

For me, the problem was in CSS hierarchy and specificity, I was defining the styles of the item in relation to the parent. like so:

.list .item{
...
}

but while dragging the item, the element was no longer a child to the [previous] parent but was a separate element outside the parent. hence it lost all its styling! therefore to solve this problem we could just define the item and parent styles globally like so:

.list{
...
}

.item{
...
}