KBW's cosmos

interface MemberInfoTextProps { isBold: boolean; fontSize: string; fontColor: string; textAlign: string; } export const InfoText = styled.p` font-weight: ${props => props.isBold ? "bold" : "normal"}; font-size: ${props => props.fontSize}; color: ${props => props.fontColor}; text-align: ${props => props.textAlign}; ` 위와 같이 interface로 props의 속성들을 정의해주고 괄호 안에 이 interface를 넣습니다. 그리고 ${}로 props를 받은 뒤..

버튼 위와 같이 태그가 있다고 할 때, 기존의 React라면 아래와 같이 style을 inline으로 넣을 수 있다. 버튼 하지만 Styled Component를 이용하는 경우 이렇게 넣으면 아래와 같이 오류가 난다. Styled Component를 사용하는 경우 아래와 같이 중괄호를 두번 쳐주고 사용해줘야한다. 버튼 속성 이름은 그냥 써주고 속성 값은 ' '으로 감싸준다. (;) 세미콜론은 붙이지 않는다. 만약 스타일을 여러 개 넣는다면 아래와 같이 (,)로 구분해주면 된다. 버튼 추가로 margin-top이나 background-color의 경우 속성 이름에 (-)하이픈이 들어가기 때문에 오류가 난다. 이 경우 아래와 같이 카멜표기법으로 적어주면 된다. 버튼