React - MUI Accordian 스타일 접기/펼치기 버튼

Accordian 스타일을 보면 주로 오른쪽에 접기/펼치기 버튼이 있는것을 볼 수 있다.

 

 

 

 

MUI 라이브러리가 지원하는 아이콘으로 접기/펼치기 버튼을 구현해보자

 

우선 @mui/icons-material 라이브러리를 설치한다

 

npm i @mui/icons-material

 

위 라이브러리 내부의 /ExpandMore 에서 Icon을 화살표 모양의 아이콘을 불러올 수 있다.

 

import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

 

위 코드로 필요한 아이콘을 import하고

 

AccordianSummary 컴포넌트의 props로 전달한다.

 

 

 

 

완성