[React/Styled Component] Styled Component 이용 시 React 태그 안에 style 속성 넣는 법 (Styled Component inline style)

 

<Button>버튼</Button>

위와 같이 태그가 있다고 할 때, 기존의 React라면 아래와 같이 style을 inline으로 넣을 수 있다.

 

<Button style="height:150px;">버튼</Button>

하지만 Styled Component를 이용하는 경우 이렇게 넣으면 아래와 같이 오류가 난다.

 

Styled Component를 사용하는 경우 아래와 같이 중괄호를 두번 쳐주고 사용해줘야한다.

<Button style={{height: '150px'}}>버튼</Button>

속성 이름은 그냥 써주고 속성 값은 ' '으로 감싸준다. (;) 세미콜론은 붙이지 않는다.

 

 

만약 스타일을 여러 개 넣는다면 아래와 같이 (,)로 구분해주면 된다.

<Button style={{height: '150px', padding: '5px 10px'}}>버튼</Button>

 

---

 

추가로 margin-top이나 background-color의 경우 속성 이름에 (-)하이픈이 들어가기 때문에 오류가 난다.

이 경우 아래와 같이 카멜표기법으로 적어주면 된다.

<Button style={{marginTop: '20px'}}>버튼</Button>