[CSS] CSS inline 스타일 적용하기

JSX 문법을 사용해 CSS를 적용하는 방식은 HTML에서 CSS를 적용하는 방식과 유사합니다.

 

역시 다른 점이라고 한다면, JSX 문법으로 인해 생기는 HTML과의 차이점 정도라고 할 수 있겠습니다.

 

[JSX에 대해서]

 

• JSX에서 style은 객체 형태로 넘겨줄 수 있어, style을 먼저 변수로 선언한 뒤 {중괄호}로 불러올 수 있습니다.
• CamelCase를 사용합니다(e.g. background-color → backgroundColor).
• 스프레드 문법({..., })을 사용하면 클래스 상속과 같이 다른 스타일의 요소들을 사용할 수 있습니다.

아래는 버튼에 스타일을 적용하는 코드입니다.

 

버튼의 공통된 스타일은 baseButtonStyle에,

 

색과 관련된 코드는 blueButtonStyle과 redButtonStyle에 구현되어 있습니다.

const baseButtonStyle = {
  padding: '14px 27px',
  borderRadius:  '30px',
  outline:'none',
  cursor: 'pointer',
  fontSize: '17px',
};

// 스프레드 문법으로 baseButtonStyle의 요소들을 가져왔습니다.
const blueButtonStyle = {
  ...baseButtonStyle,
  backgroundColor: 'rgba(0, 89, 255, 0.2)',
  border: 'solid 1px #7090ff',
  color: '#7090ff',
};

// 스프레드 문법으로 baseButtonStyle의 요소들을 가져왔습니다.
const redButtonStyle = {
  ...baseButtonStyle,
  backgroundColor: 'rgba(255, 78, 78, 0.2)',
  border: 'solid 1px #ff4664',
  color: '#ff4664',
};

// color prop 값에 따라 blueButtonStyle 또는 redButtonStyle을 적용합니다.
function Button({ children, onClick, color }) {
  const style = color === 'red' ? redButtonStyle : blueButtonStyle;
  return <button style={style} onClick={onClick}>{children}</button>;
}

export default Button;