styled-component를 사용하는 프로젝트를 진행하던 중 각 컴포넌트 안에서 작성하는게 지저분해 보여서 분리하기로 했다.
src/styles/HeaderStyle.ts 경로에 만들었다.
- styled를 import 한다.
- css를 작성한다.
- styledComponents = { 위에서 만든 변수들 }; 변수를 생성한다.
- styledComponents를 export 한다.
- export 했던 styledComponents를 import 해준다.
- styledComponents 내에 변수들을 가져온다.
아쥬아쥬 간단하다!!
한 곳에 다 작성했을 때 보다 훨씬 깔끔해졌다!