- Material-ui's components > ListItem : not working mouse drag select
- Because ListItem's 'button' option
- But remove button option > not working cursor:pointer and background focus highlighting
- So ListItem needs css control.
- Mouse over > cursor : pointer
.list {
cursor: pointer;
}
- Mouse over > Item background focus hoghlighting
import { MouseEvent } from 'react';
const handleMouseOver = (e: MouseEvent) => {
const target: HTMLElement = e.target as HTMLElement;
target.classList.add('Mui-focusVisible');
}
const handleMouseOut = (e: MouseEvent) => {
const target: HTMLElement = e.target as HTMLElement;
target.classList.remove('Mui-focusVisible');
}
...
<ListItem
key={i}
className='list'
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
>