[react] deepDive 6 리액트 컴포넌트 스타일링

태그안에 스타일링 적용 방법

작은 따옴표 ''

 <div className="chart-bar__fill" style={'height: 10%'}></div>

중괄호안의 {key : value}

 <div className="chart-bar__fill" style={{ height: "10%" }}></div>

카멜케이스 사용

 <div className="chart-bar__fill" style={{ backgroundColor : 'red'}}></div>

 

동적 인라인 스타일 적용하기

값이 변할 때 동적인 css넣기 (삼항연산자를 사용함)

    <label style={{ color: !isValid ? "red" : "black" }}>Course Goal</label>

=> !isValid 이면 red로 label의 색상을 변경한다

const [isValid, setIsValid] = useState(true);

<input
          style={{
            borderColor: !isValid ? "red" : "black",
            backgroundColor: !isValid ? "salmon" : "transparent",
          }}
          type="text"
        />

borderColor : 테두리 색상

transparent : 완전히 투명한 색 즉, 해당 요소나 영역이 보이지 않게 됨

 const goalInputChangeHandler = (event) => {
    if (event.target.value.trim().length > 0) {
      setIsValid(true);
    }
    setEnteredValue(event.target.value);
  };

=> 조건식이 참일경우에 isValid가 다시 true가 된다

 

=>사용자가 input을 입력할경우는 

borderColor:"black",
backgroundColor: "transparent",

=>사용자가 input을 입력하지 않을 경우에는 

borderColor: "red",
backgroundColor: "salmon",

 

삼항연산자를 이용해 동적으로 스타일링을 해주어 사용자가 input값을 입력하도록 표시해준다

 

동적으로 css클래스 설정하기

백틱사용과 삼항연산자 사용하여 조건에 따라 클래스 추가

   <div className={`form-control ${!isValid ? "invalid" : ""}`}>

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

.form-control.invalid label {
  color : red
}

 

styled-component 사용하기

터미널에 설치

npm install styled-components

import styled from "styled-components";

const FormControl = styled.div`
  margin: 0.5rem 0;

  & label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
  }
`;  

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