[Material-UI] 버튼 컴포넌트클릭시 물결 퍼짐 효과 없애기

Material UI로 버튼 컴포넌트 삽입후 요소에 클릭했을 때 물결이 퍼지는 효과가 나타난다.

이런 효과가 들어가면 "이거 라이브러리 썼어요" 싶고 너무 부자연스럽기에...ㄱ-

버튼 컴포넌트 클릭했을 때의 기본 물결 효과를 없애는 작업을 해줘야 한다!

 

이런 효과를 비활성화 시키고 싶다면 disableElevation나 disableRipple prop을 사용하면 된다.

참고로, disabled 속성이 적용된 비활성화된 버튼은 형태와 상관없이 자동 회색으로 뿌옇게 처리가 된다.

 

예시로 이전 버튼에 disableRipple 속성을 prop 했다.

 

disableRipple prop 안한 버튼 요소

disableRipple 처리안한 다른 버튼 요소와 비교해보면
클릭했을 때 물결 일렁이는 효과뿐 아니라
호버시 살짝 그림자 지는 효과도 제거된 걸 확인할 수 있다.

 

disableRipple prop 한 버튼 요소

이게 disableRipple prop한 이전 버튼 요소다.
확실히 안한 것과 비교했을 때 자국이 사라졌다.