How to style an element onDragOver in Material-UI?

Issue

To change the backgroundColor on hover, I can use sx={{"&:hover":{backgroundColor:"yellow"}}

How can I change the backgroundColor on dragover? sx={{"&:dragOver":{backgroundColor:"yellow"}} doesn't seem to work

Solution

There is no pseudo class in CSS like :dragOver. To style element on dragOver you will have to add and remove class on dragEnter and dragLeave event respectively. Roughly steps are:- First create css class with styles you want. Then add the class to the element on dragEnter event and remove it on dragLeave event.

Answered By - Shikhar Awasthi