styled component에서 global variables

react native에선 .css 파일이 지원이 안된다고 해서

최근 진행중인 react 개인 프로젝트의 styling을 styled-components로 작업하고 있다.

기존에 만들어둔 .css 파일을 옮기려고 하는데

global 변수를 기존 css와 같이 사용 할 수 있다.

styled component에 점점 매료되는 것 같다..

그런데 기존 css파일에서 처럼

:root {
  /* Color */
  --color-dark-grey: #363636;
  --color-grey: #616161;
  --color-light-grey: #838383;
  --color-orange: #feb546;
  --color-yellow: #fdcc11;
  --color-blue: #175cbe;
  --color-light-pink: hsl(321, 63%, 90%);
}

이런식으로 컬러를 지정해서 사용할 때 그 색이 무슨색인지 옆에 네모로 조그맣게 표시되지 않는 점은 너무 아쉽다.

• vscode에서 color highlight extension을 설치
• https://color.adobe.com/ko/create/color-wheel

위 사이트에서 컬러를 선택하고 extension으로 컬러를 표시하게 하면 아쉬운 점을 메울 수 있는 것 같다.

참고 문헌

• https://www.sungikchoi.com/blog/styled-components-design-system-1/