在react中元件使用樣式主要有兩種方式：內聯式和外聯式。下面分別介紹兩種方式：

      一、內聯式

      使用內聯樣式，和html中差不多，不多在此處需要注意的是，通過style屬性不能直接用雙引號就定義樣式，而要用物件的方式來定義樣式，如圖：

      二、外聯式

      外聯樣式表主要是通過類名來實現，將樣式定義程式碼放在一個單獨的樣式表中，實現步驟如下所示：

      1、元件新增類名，然後在src目錄下新建css樣式檔案，如圖：

      2、在css樣式檔案中定義元件樣式：

      3、因為主程式入口是index.js檔案，所以在index.js檔案中引入css樣式檔案，如圖：

      4、效果：

在使用樣式檔案的時候其實有以下幾點需要注意的：

a、內聯樣式時，和html稍有不同，樣式定義要用花括號，用物件方法定義樣式，各個樣式屬性之間用逗號隔開；

b、外聯樣式使用時，不能用class來定義元件類名，而要用className，在react的JSX語法中，class是一個關鍵字；

c、外聯樣式檔案一定要在index.js檔案中引用，才可以使用。