스타일 지정하기

1. styled.[태그]``
2. styled([태그])

styled. 뒤에 태그를 입력하거나, styled() 괄호 안에 태그를 입력함으로써 스타일을 지정 가능하다.

여기서, 기존에 만든 스타일을 가져와 변경하고 싶다면, 2번째 방법을 쓰면 된다.(1번째 방법을 썼더니 에러 발생)

const Label = styled.div`
  font-size: 1.4em;
  margin: 10px 0 5px 0;
  color: #666;
`;

const SubmitButton = styled(Button)`
  width: 100%;
`;

props 사용하기

props : 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 것

props를 통해 쉽게 동적으로 스타일을 변경할 수 있다.

대표적인 사용법은 아래와 같다.

const InputEmail = styled(Input)`
    border-color: ${(props) => (props.valid ? "green" : "red")};
`;

border-color를 사용해 테두리 색을 변경할 때, props.valid의 값이 true면 ‘green’, false면 ‘red’로 색이 변경된다.

이러한 코드는 react에서 props로 무언가를 전해줘야만 사용할 수 있다.