이모션으로 변수 이용하기
팀원이 작성한 코드를 보면서 이모션으로 변수를 이용하여 스타일을 적용하는법을 배웠다.
폰트 스타일과 처럼 정해진 여러개의 스타일을 하나의 변수로 지정해서 쓰면 중복 코드를 많이 줄일 수 있다.
아마 스타일드 컴포넌트에서도 똑같은 문법으로 쓸 수 있을것 같다.
변수 설정
아래처럼 따로 ts 파일을 만들어서 폰트 스타일을 변수로 지정한다.
fontStyles.ts
변수 사용
아래처럼 필요한 곳에 ${변수명} 의 형식으로 import 하여 사용한다.
'프론트엔드 > HTML 및 CSS' 카테고리의 다른 글
| [Emotion] Emotion써보기 (0) | 2024.03.08 |
|---|---|
| [Tailwind CSS] Tailwind CSS 써보기 (0) | 2024.02.02 |
| [CSS] position 정리 (0) | 2023.11.21 |
| [HTML] 시맨틱 태그 (0) | 2023.11.19 |
| [HTML] <input> 태그 정리 (0) | 2023.11.18 |