material makeStyle legacy 변경하기

현재 프로젝트에서 material v4를 사용중이였고, css 작성하듯 하면 되어 편해서 사용중이였는데 legacy 코드라는 말을 듣고 변경하게 되었다.

• makeStyles

// makeStyles
const useStyle = makeStyles({   // legacy
    box: {
       padding: 20,
       "& .text": {
           fontSize: 14
       }
    }
});

// use
const Component = () => {
  const classes = useStyle();   // legacy
	...
	...
	return (
		<div className={classes.box}>
			<Component class="text" />
		</div>
	)
}

위의 box와 text 클래스에 css를 적용한 거 처럼 트리 구조로 작성할 수 있어서 편했는데
legacy라니 아쉬웠다.

그래서 나름대로 대화하여 규칙을 정한 방향이 속성 2개까진 인라인스타일로, 아닌 경우 styled-components로 하기로 하였다.
인라인스타일을 포함 시킨 이유는 material이 v5 로 업데이트 되면서 인라인 스타일을 선언하는방식과 이름만 달라지고 똑같았기 때문이다.

• styled-components + material

import styled from "styled-components";
import { Box } from "@material-core";
const ButtonRow = styled.div`   // use styled-components
    padding: 20px 0 0;
    text-align: center;
    background-color: yellow;
`;
const CustomBox = styled(Box)({   // use styled-components + material
	padding: 20
  backgroundColor: yellow;
});

위 처럼 material의 컴포넌트가 아닐 경우 백틱을 사용하여 css처럼 작성,
material 컴포넌트일 경우는 styled뒤 object로 작성하면 되고, 주의할 점은
백틱의 경우 css 작성 그대로, object로 할 때에는 camelCase로 해야 한다

• inline

<InlineStyleComponent   // use inline-style
  style={{
    color: blue
  }}
>
</InlineStyleComponent>


<InlineStyleComponent   // material v5+
  sx={{
    color: blue
  }}
>
</InlineStyleComponent>

인라인스타일은 style={{}} material 에서는 sx={{}} 의 방식이여서
material로 교체된 컴포넌트는 컴포넌트 이름과 style에서 sx로 이름만 바꿔주면 되니
향후에 변경되거나 화면 가독성 측면에서도 유리할것 같다.