동적 스타일링

동적 인라인 스타일링

<label style={{ color: !isValid ? 'red' : 'black' }} />
<input style={{ backgroundColor: !isValid ? 'red' : 'black' }}

기존의 color가 black일 때, isValid가 false일 경우 color 프로퍼티를 red로 동적으로 변화시킨다.
이 방식은 단점이 존재한다.
css가 인라인 스타일링을 기존 css파일에 명시된 것 보다 우선시 하기 때문에 기본 스타일을 덮어쓴다.
즉, 조건이 유효하지 않을 경우 css파일에 명시된 스타일 속성과 중복된다.

동적 class 스타일링

<div className={`form-control ${!isValid ? 'isValid' : ''}`}

템플릿 리터럴에 ${}를 이용하여 동적인 값을 주입하는 방법이다.
inValid클래스를 동적으로 추가하여 주었으므로 기존의 css파일에 inValid 클래스를 추가해 스타일링 해준다.

동적 styledComponents 스타일링

<FormControl invalid={!invalid}>
  <label />
  <input />
</FormControl>

괄호 안에 조건부를 넣어 그 조건을 충족하면 styled-components에 props로 invalid를 전달해준다.

위와 같이 props에 기반해 스타일의 일부를 동적으로 변화시킬 수 있다.

참고로,styledComponents에서 &은 자기자신을 가르키며 위와 같이 사용하면 FormControl 엘리먼트의 하위 엘리먼트인 label을 하위 선택자로 선택할 수 있다.

styled-components에 미디어 쿼리 적용하기

위와 같이 템플릿 안에서 사용하면 된다.