-
7월 28일 - next.js styled JSX, :global()TIL(미사용) 2020. 7. 28. 15:58
추벽 증후군 수술하고 나서 또 겨우 잡았던 공부 습관 무너져서... 한 달 반이나 지나부렸다... 다시 천천히 시작하자.
Styled JSX
styled JSX 라이브러리를 사용하면 아래와 같이 스타일을 적용할 수 있다.
Next.js의 경우 디폴트로 제공하는 기능이라고 한다.
또한 style 태그에 작성한 css는 이 코드를 작성한 컴포넌트에만 적용이 된다. (자식 컴포넌트에 동일한 이름의 클래스 이름이나, element가 있다고 해도 적용되지 않는다.)
:global(.className)
하지만 때론 자식 컴포넌트의 어떤 스타일을 override하고 싶을 때가 있다. 이럴 땐 :globla(.className)을 사용하면 동일한 className을 가진 자식 컴포넌트의 element의 스타일에도 영향을 주게 된다.
+ 그래서 라이브러리 쓸 때 라이브러리의 style을 수정하려면 이렇게 써야 됐던 거구나...
'TIL(미사용)' 카테고리의 다른 글
6월 15일 - elasctic beanstalk rds (0) 2020.06.15 6월 11일 - express elastic beanstalk 배포하기 (0) 2020.06.11 6월 9일 - elastic beanstalk next.js 배포 문제 (0) 2020.06.09 6월 8일 - Elastic Beanstalk next.js (1) 2020.06.08 6월 4일 - S3에 React 배포(정적 웹사이트) (0) 2020.06.04