jsx 中給元素CSS樣式。

首先，介紹一種優先順序最高的行內樣式。如下。

<button style={{background: 'red',color: 'white'}} onClick={this.handleBtnClick}>add</button>

style 最外層括號表示是js 表示式，內層括號表示是一個物件。

然後呢，是class 形式的樣式。

我們在src 下新建一個style.css 檔案，內容如下。

.red-btn {
  background: red;
  color: #fff;
}

然後在，入口檔案index.js 中引入。如下。

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

import './style.css'

ReactDOM.render(<TodoList />, document.getElementById('root'));

然後再使用這個class，如下。

  getTodoItems() {
    return (
      this.state.list.map((item, index) => {
        return (
          <TodoItem className='red-btn' deleteItem={this.handleDelete} key={index} content={item} index={index} />
        )
      })
    )
  }
 

然後呢，當我們不想最外層包裹div 時，可以使用React.Fragment ，如下。

  render() {
    return (
      <React.Fragment>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange}/>
          <button style={{background: 'red',color: 'white'}} onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>
          {this.getTodoItems()}
        </ul>
      </React.Fragment>
    );
  }