React：Adding styling with Stylesheets &Working with inline style

Adding sytling with sytlesheets

建立css文件

.Person{ margin: 16px auto; color: aqua; width: 60%; border: 1px solid #eeeeee; box-shadow:0 2px 3px rgb(208, 214, 214); padding: 16px; text-align: center; }

将css文件import入js文件

import './Person.css';

webpack会将该css文件放入html中；

Working with inline style

设定style

const style = { backgroundColor:'white', font:'inherit', border:'1px solid blue', padding:'8px', cursor:'pointer' }; //hovering style难改

传入要被改变的标签

<button style={style} onClick={this.switchNameHandler.bind(this,'Blue')}>Switch Name</button>