[Material UI] makeStyles에 props사용하기

예시와같이 컴포넌트를 map으로 랜더링하는 경우를 생각해보자

4개의 컴포넌트가 리턴되었는데, 나는 특정 컴포넌트를 누를때만 효과를 적용하고 싶었다

따라서 dynamic한 CSS적용이기에 props를 이용한 makestyle을 사용하려고 한다

일단 className을 잡기위해 useStyles라는 makeStyles 함수 객체를 만들어 적용하였다

이름은 root로 하였다.

이 함수에 props를 넣어주면 이는 makeStyles객체로 전달된다.

내 경우에는 useState로 정의한 props를 만들었다

그리고 이 props를 makeStyles에 그대로 보내주었기에

 

나는 props으로 접근하여 CSS를 먹일수 있게 되었다

props에 CSS 데이터 자체가 있어도 괜찮지만, 나는 이것을 조건으로 사용하였다

usestate로 만든 조건이므로, state가 변경될때마다 다른 효과가 적용되었다.