material-ui의 ListItem에서 mouse drag select 를 하려고 하면 안 된다. drag select 자체가 동작하질 않는다. 이유는 ListItem의 button 옵션 때문이다 . 이 옵션을 주면 buttonbase 로 동작한다고 한다.
그래서 해당 아이템에 마우스 오버를 하면 cursor가 pointer로 바뀌고 아이템에 백그라운드 포커스 하이라이트를 줄 수 있다. 또 클릭 시 리플같은 효과를 줄 수 있다 .하지만 목적이 mouse drag select 이기에 이 옵션을 빼야 한다. 빼면 커서도 안 바뀌고 하이라이트도 줄 수 없다. 그래서 별도 css 컨트롤을 해줘야 한다 .
- 아이템에 마우스 오버 시 cursor: pointer 처리
- 아이템에 마우스 오버 시 포커스 하이라이트
//App.js
import { MouseEvent } from 'react';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Divider from '@material-ui/core/Divider';
import './style.css';function App() {
const list = ['aaaaaa', 'bbbbbb', 'cccccc', 'dddddd', 'eeeeee', 'ffffff', 'gggggg', 'hhhhhh', 'iiiiii', 'jjjjjj', 'kkkkkk'];//아이템에 마우스 오버 시 백그라운드 포커스 하이라이트 css 추가
const handleMouseOver = (e: MouseEvent) => {
const target: HTMLElement = e.target as HTMLElement;
target.classList.add('Mui-focusVisible');
}//아이템에 마우스 오버 시 백그라운드 포커스 하이라이트 css 제거
const handleMouseOut = (e: MouseEvent) => {
const target: HTMLElement = e.target as HTMLElement;
target.classList.remove('Mui-focusVisible');
}return (
<div className='container'>
{list.map(i =>
<>
<ListItem
key={i}
className='list'
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
>
<ListItemText primary={i} />
</ListItem>
<Divider />
</>
)}
</div>
);
}export default App;
//style.css
.container {
padding: 100px;
margin: 50px;
display: flex;
flex-direction: column;
border: 1px solid gray;
width: 30%;
height: 100%;
justify-content: center;
}
.list {
display: 'flex';
flex-direction: column;
justify-content: center;
cursor: pointer;
}
//참조
