리액트 - 인라인 스타일

style 객체를 만들어주고, prop으로 전달한다. 

//Button.js
const style = {
    backgroundColor: 'pink',
}

function Button({ children, onClick }){
    // App에서 onClick prop을 받아 처리한다.
    return <button style={style} onClick={onClick}>{children}</button>;
}

const style = {
    backgroundColor: 'pink',
}

function Button({ children, onClick }){
    // App에서 onClick prop을 받아 처리한다.
    return <button style={{backgroundColor : 'yellow'}} onClick={onClick}>{children}</button>;
}

Button 컴포넌트의 prop값에 따라서 두 버튼의 스타일을 다르게 만들기 

1. 공통되는 스타일과 각 prop에 따라 적용될 스타일을 따로 작성하기

2. Button 컴포넌트에 color prop을 추가하기 

//공통되는 부분
const baseButtonStyle = {
    padding: '14px 27px',
    outline: 'none',
    cursor: 'pointer',
    borderRadius: '9999px',
    fontSize: '17px',
  };
  
  //공통되는 부분을 spread 구문으로 펼쳐주고, 
  //서로 다르게 적용되어야 하는 스타일만 각 객체에 따로 추가
    const blueButtonStyle = {
    ...baseButtonStyle,
    border: 'solid 1px #7090ff',
    color: '#7090ff',
    backgroundColor: 'rgba(0, 89, 255, 0.2)',
  };
  
  const redButtonStyle = {
    ...baseButtonStyle,
    border: 'solid 1px #ff4664',
    color: '#ff4664',
    backgroundColor: 'rgba(255, 78, 78, 0.2)',
  };
function Button({ children, onClick, color }){
    const style = color === 'red'? redButtonStyle : blueButtonStyle;
    return <button style={style} onClick={onClick}>{children}</button>;

style 에서 조건 연산자를 통해 조건에 따라 스타일을 정해줄 수 있다 

//App.js 에서 Button 컴포넌트에 color prop에 각 색깔 지정하기
<Button color="blue" onClick={handleRollClick}>던지기</Button> 
<Button color="red" onClick={handleClearClick}>처음부터</Button>

 

.HandButton {
  width: 166px;
  height: 166px;
  border: none;
  outline: none;
  text-align: center;
  cursor: pointer;
  background-color: transparent;
  background-image: url('./assets/purple.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

CSS 스타일

import backgroundImg from './assets/purple.svg';

const style = {
  width: '166px',
  height: '166px',
  border: 'none',
  outline: 'none',
  textAlign: 'center',
  cursor: 'pointer',
  backgroundColor: 'transparent',
  backgroundImage: `url('${backgroundImg}')`,
  backgroundRepeat: 'no-repeat',
  backgroundPosition: 'center',
  backgroundSize: 'contain',
};

JSX 인라인 스타일

객체임을 잊지 말즈아.. 

속성 이름은 Camel Case로 쓰는걸 잊지 않도록 하자

이미지는 import해와서 써야한다. 

value값에는 따옴표 ' ' 를 붙여주고 (문자열로 전달), 쉼표를 붙여주기이...