[ReactJS_Complete] Conditional Styling

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

 

 

1. Setting Dynamic Inline Styling

  return (
    <form onSubmit={formSubmitHandler}>
      <div className="form-control">
        <label style={{ color: !isValid ? "red" : "black" }}>Course Goal</label>
        <input
          style={{ border: !isValid ? "1px solid red" : "1px solid #CCC" }}
          type="text"
          onChange={goalInputChangeHandler}
        />
      </div>
      <Button type="submit">Add Goal</Button>
    </form>
  );
 

 

2. Setting CSS Classes Dynamically

  return (
    <form onSubmit={formSubmitHandler}>
      <div className={`form-control ${!isValid ? 'invalid' : ''}`}>
        <label>Course Goal</label>
        <input type="text" onChange={goalInputChangeHandler} />
      </div>
      <Button type="submit">Add Goal</Button>
    </form>
  );
 

.form-control.invalid input {
  border-color: salmon;
  background-color: #ffd7d7;
}
 
.form-control.form-control.invalid label {
  color: salmon;
}
 

 

3. Using Styled Library1

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 {
    /*input:focus, input type에 focus가 들어왔을 때*/
    outline: none;
    background: #fad0ec;
    border-color: #8b005d;
  }
 
  &.invalid input {
    border-color: salmon;
    background-color: #ffd7d7;
  }
 
  &.invalid label {
    color: salmon;
  }
`;
 
 
const CourseInput = (props) => {
  return (
    <form onSubmit={formSubmitHandler}>
      <FormControl className={!isValid && 'inValid'}>
        <label>Course Goal</label>
        <input type="text" onChange={goalInputChangeHandler} />
      </FormControl>
      <Button type="submit">Add Goal</Button>
    </form>
  );
};
 

 

4. Using Styled Library2

const FormControl = styled.div`
   {
    margin: 0.5rem 0;
  }
 
  & label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
    color: ${props => props.invalid ? 'tomato' : 'black'};
  }
 
  & input {
    display: block;
    width: 100%;
    border: 1px solid ${props => (props.invalid ? 'tomato' : '#ccc')};
    background: ${props => props.invalid ? '#ffd7d7' : 'transparent'};
    font: inherit;
    line-height: 1.5rem;
    padding: 0 0.25rem;
  }
 
  & input:focus {
    /*input:focus, input type에 focus가 들어왔을 때*/
    outline: none;
    background: #fad0ec;
    border-color: #8b005d;
  }
 
`;
 
 
const CourseInput = (props) => {
  return (
    <form onSubmit={formSubmitHandler}>
      <FormControl invalid={!isValid}>
        <label>Course Goal</label>
        <input type="text" onChange={goalInputChangeHandler} />
      </FormControl>
      <Button type="submit">Add Goal</Button>
    </form>
  );
};
 

 

5. Using CSS Module

  return (
    <form onSubmit={formSubmitHandler}>      <div className={`${styles['form-control']} ${!isValid && styles.invalid}`}>
      {/* className에 -가 들어가는 경우, ''로 감싼 후 []로 감싸기
      styles['form-control']: form-control이라는 클래스를 styles 객체에서 가져오기 → output: form-control
      !isValid && styles.invalid: isValued 초기값-true, && 첫 번째 피연산자가 false로 평가되는 경우 그 값을 반환 → output: inValid
       */}
        <label>Course Goal</label>
        <input type="text" onChange={goalInputChangeHandler} />
      </div>
      <Button type="submit">Add Goal</Button>
    </form>
  );