[Material UI] Material UI 컴포넌트에 CSS먹이기

보통은 styled-component로 div를 잡아서 하다가

컴포넌트를 외부에서 가져다가 쓰는 경우는 조금 애매했다

 

예를들어 Material UI에서 TextField 컴포넌트를 가져다 쓰는 경우

 

material-ui.com/styles/basics/#higher-order-component-api

@material-ui/styles - Material-UI

이런 경우에는 withStyles이라는 hoc를 사용한다

이에 대한 변수를 생성해주고

 

요렇게 해당 변수를 컴포넌트로 사용하면 된다.

 

가끔 makeStyles와 헷갈리는데,

 

The Hook API (makeStyles/useStyles) can only be used with function components.

The Higher-order component API (withStyles) can be used with either class components or function components.

They both provide the same functionality and there is no difference in the styles parameter for withStyles and makeStyles.

 

라고한다. 그러니까 그냥 withStyles 쓰면 될 듯 하다.

 

다만 이렇게 makeStyles를 먹이고 싶다면

 

일단 useStyles 객체를 만들어 주고

className으로 접근하면 된다

withStyle도 동일한 방법으로 작동한다