87. Styled Components & 동적 Props

두 가지 방법이 있는데

첫 번째는

 <FormControl className={!isValid && 'invalid'}>

FormControl 컴포넌트에서 className 을 동적으로 주는 방법이 있고

 

두 번째는

<FormControl invalid={!isValid}>

Formcontrol 컴포넌트에 invalid 값을 넘겨서 css에서 동적으로 바뀌게 하는 방법이 있다

& input {
  display: block;
  width: 100%;
  border: 1px solid ${props => props.invalid ? 'salmon' : '#ccc'};
  background-color: ${props => props.invalid ? 'rgb(255, 209, 209)' : 'transparent'};
  font: inherit;
  line-height: 1.5rem;
  padding: 0 0.25rem;
}