[리액트(React) Study Log] [Person App-028] Adding Pseudo Selectors
1. css 파일을 이용해서 button styling 을 해보자.
- inline style 요소들 모두 제거 (아래 3부분)
const style = {
backgroundColor: 'green',
color: 'white',
border: '1px solid blue',
padding: '8px',
cursor: 'pointer',
}
style.backgroundColor = 'red';
style={style}
- App.css 에 4종 style 추가
.App button {
border: 1px solid blue;
padding: 16px;
background-color: green;
font: inherit;
color: white;
cursor: pointer;
}
.App button:hover {
background-color: lightgreen;
color: black;
}
.App button.Red {
background-color: red;
}
.App button.Red:hover {
background-color: salmon;
color: black;
}
- App.js 수정
// src-App.js
...
render() {
let persons = null;
let btnClass = '';
...
btnClass = classes.Red;
}
...
<button
className={btnClass}
...