Changing cursor to grab/grabbing with dragHandle

If anyone could provide an example with how I can use a grab and grabbing cursor with a drag handle, that would be great. Right now, no matter what CSS I try to use, the cursor seems to always go to default when dragging is active.

Edit: Closing this, I ended up using a workaround where I just applied a class to the whole document body

[zackify]

FYI heres’s how i did it:

onSortStart={() => (document.body.style.cursor = 'grabbing')}
onSortEnd={({ newIndex, oldIndex }: any) => {
    document.body.style.cursor = 'default';
...

then on your drag handler make sure to put cursor: grab on it

[arosisi]

FYI heres’s how i did it:

onSortStart={() => (document.body.style.cursor = 'grabbing')}
onSortEnd={({ newIndex, oldIndex }: any) => {
    document.body.style.cursor = 'default';
...

then on your drag handler make sure to put cursor: grab on it

Just to add to @zackify 's approach, to make sure that the cursor will not change when you drag over, say a button (it may change to a pointer), you can do this:

onSortStart={() => (document.body.className = 'grabbing')}
onSortEnd={({ newIndex, oldIndex }: any) => {
  document.body.className = '';
...

where grabbing is

grabbing {
  cursor: grabbing;
}
grabbing * {
  cursor: grabbing;
}