SortableElement not using provided style

[id0Sch]

Hi,
i'm trying to follow the solution of the z-index issue (#87 (comment))
and i have the following component:

const SortableItem = SortableElement(({value}) => <div className="item" >{value}</div>)
const Sortable = SortableContainer(({items}) => {
  return <List className="list">
    {
      items.map((item, index) => <SortableItem key={item} index={index} value={item}
                                               style={{zIndex: 1000000}}/>)
    }
  </List>
})

and this is the generated html

it seems as if the SortableElement is creating another div that is created w/o the provided style.
am I missing anything?
Thanks.

[clauderic]

You need to pass the style attribute down to the div itself.

const SortableItem = SortableElement(({value, style}) => 
  <div className="item" style={style}>{value}</div>
)

Having said that, applying a zIndex of 1000000 to all of your elements might not be a great idea. Instead, I highly recommend you use the helperClass prop to selectively apply a high z-index to only the element that is currently being dragged

[id0Sch]

weird, setting the helperClass didn't work before so i tried the z-index solution.
but it did now..
thanks!

[SerKnight]

Yeah I found inline style to be easiest to persist css during drag.

<span style={{fontWeight:'bold', paddingRight: 5}}>{num +1})</span>
    {value}
</span>