React 三种方式建立样式style

style = {{ /* Your Atrribute*/ }}

export class TodoItem extends Component {
    render() {
        return (
            <div style={{backgroundColor:'#f4f4f4'}}> 
                <p>{this.props.todo.title}</p>
            </div>
        )
    }
}

style = {itemStyle} Const itemStyle = {}

xport class TodoItem extends Component {
    render() {
        return (
            <div style={itemStyle}> 
                <p>{this.props.todo.title}</p>
            </div>
        )
    }
}

const itemStyle = {
    backgroundColor:'#f4f4f4'
}

放入method（可随元素本身改变）

export class TodoItem extends Component {
    getStyle = ()=>{
        return{
            background:'#f4f4f4',
            padding:'10px',
            borderBottom:'1px #ccc dotted',
            textDecoration:this.props.todo.completed ? 
            'line-through': 'none'
        }
    }
    render() {
        return (
            <div style={this.getStyle()}> 
                <p>{this.props.todo.title}</p>
            </div>
        )
    }
}