![](https://velog.velcdn.com/images/fo_rdang/post/08809728-a828-4939-84e3-641e6fdfeac8/image.png)
CSS 지원 안함.
- 1) 인라인 스타일을 추가해서 스타일 객체를 프로머티로 전달하거나
- 2) 별도의 객체를 정의해서 그걸 프로피티로 전달.
![](https://velog.velcdn.com/images/fo_rdang/post/8a05d39d-998e-434b-b18a-4d0bde4da6bf/image.png)
-
스타일은 JS에서 정의
- JS는 CSS의 프로퍼티와 기능 일부만 지원
- 이름도 다 다름
코드 적용
![](https://velog.velcdn.com/images/fo_rdang/post/608e407b-31ff-4b3f-a362-f810209b27e2/image.png)
1) inline styling
![](https://velog.velcdn.com/images/fo_rdang/post/6d9387c8-2994-4cf6-97a2-f43dca22f169/image.png)
![](https://velog.velcdn.com/images/fo_rdang/post/58d5ac42-9847-423e-a2b2-b77fe5f1e315/image.png)
2) StyleSheet styling
![](https://velog.velcdn.com/images/fo_rdang/post/87f841a0-4fc1-4e3b-9bb0-aa3485c7f55d/image.png)
- 보통 이 방법을 많이 씀.
- 재사용 가능
- jsx 코드랑 분리 가능
이런식으로 재사용 가능 .
![](https://velog.velcdn.com/images/fo_rdang/post/9fabcd50-c2a6-44d5-bd26-c55e72b2173f/image.png)
![](https://velog.velcdn.com/images/fo_rdang/post/ee478681-659d-4b8d-82a7-5a1c90d3d857/image.png)
![](https://velog.velcdn.com/images/fo_rdang/post/13052327-38d5-4d62-b446-4a4a4bfd2b98/image.png)
정리
![](https://velog.velcdn.com/images/fo_rdang/post/b72ace13-0dc2-415a-88b2-2b03d9ebf2ff/image.png)
- 이런식으로 스타일 객체를 생성하고 스타일을 설정할 수 있지만,
- StyleSheet 객체를 사용했을 때 이점이 있다.
- 자동완성 기능
- 코드 검증 기능 (잘못된 스타일 객체나 값에 경고 표시)