[리액트(React) Study Log] [Person App-023] Setting Styles Dynamically

[리액트(React) Study Log] [Person App-023] Setting Styles Dynamically

- 앞으로 다룰 내용 : button 스타일링(hover 모드 등), hover 모드 style 은 inline 에서는 적용 불가하며, css 로 구현해야 함.

 - dynamic styling

 

1. button 기본 스타일 객체 변경

 - backgroundColor: 'green', color: 'white',

render() {

    const style = {

      backgroundColor: 'green',

      color: 'white',

      border: '1px solid blue',

      padding: '8px',

      cursor: 'pointer'

    }

 

2. 버튼 배경색이 평상시 green, 클릭 되었을 때 red 로 하려면...

 - 버튼이 클린 된 상태는 this.state.showPersons 가 true 인 상태이므로, if block 문의 마지막(persons 다음)에

style.backgroundColor  = 'red';

를 추가