[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
You can use Material-UI's styling solution in your app, whether or not you are using Material-UI components.
material-ui.com
이런 경우에는 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도 동일한 방법으로 작동한다