styled components / 조건부 스타일

 

const FormControl = styled.div`
  margin: 0.5rem 0;
  
& label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

  & input {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
    font: inherit;
    line-height: 1.5rem;
    padding: 0 0.25rem;
  }

  & input:focus {
    outline: none;
    background: #fad0ec;
    border-color: #8b005d;
  }

  &.invalid input {
    border-color: red;
    background: #ffd7d7;
  }

  &.invalid label {
    color: aquamarine;
  }
`;

FormControl 컴포넌트이다.

isValid state가 flase일 때 스타일이 추가 되어야하는 상황이다.

두가지 방법이 있다.

 

 

첫번째 방법은 클래스 네임을 사용하는 것

클래스 네임을 &.invalid로 설정해, 조건(isValid가 false)을 만족할 때만 스타일을 추가

return (
  ...
  <FormControl className={!isValid && "invalid"}> // 클래스네임이 조건부로 생성된다
  </FormControl>
 )

 

 

두번째 방법은 prop를 사용하는 것

 

return (
  ...
  <FormControl invalid={!isValid}> 
  </FormControl>
 )

invalid라는 이름의 props를 줬다. !isValid가 true인 경우 / false인 경우를 활용할 수 있다.

props로 준 것은 위의 컴포넌트 스타일을 만드는 코드를 감싼 `백틱` 사이에, 조건부로 하고싶은 스타일을 지정하는 코드에서 쓰인다. 

 

...

& label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
  color: ${props => props.invalid ? 'red' : 'aquamarine'}
}

& input {
    display: block;
    width: 100%;
    border: 1px solid ${props => (props.invalid ? 'red' : '#ccc')};
    background: ${props => (props.invalid ? '#ffd7d7' : 'transparent')}
    font: inherit;
    line-height: 1.5rem;
    padding: 0 0.25rem;
  }
  
  
// 이제 아래 코드는 필요 없다  
//    &.invalid input {
//    border-color: red;
//    background: #ffd7d7;
//  }

//  &.invalid label {
//    color: aquamarine;
//  }

& label에서 props의 invalid가 true인 경우, 아닌 경우에 따라 스타일을 다르게 내려준다.

 

& input에서 props의 invalid가 true인 경우, 아닌 경우에 따라 스타일을 다르게 내려준다.

주석처리된 부분의 코드를 대체하고 있다(물론, 이 전 과정에서처럼, FormControl 컴포넌트에 props를 줘야 한다)

 

 

 

이렇게 해주면, isValid가 false인 상태에서는 아래처럼 나온다.

 

 

요 아래는 isValid가 true인 상태