CSS樣式分為3種形式：

    1、內聯式（行內樣式）   直接在標籤內部宣告樣式

                <div style=" color:red; font-size:16px ">測試文字</div>

    2、嵌入式（內部樣式）   通過標籤名、class或id等方法與標籤聯絡起來設定樣式

                <style type="text/css">  div{ width: 60px; }  #mydiv{ height: 70px }</style>

    3、外聯式（外部樣式）  通過引入外部檔案來設定樣式

                <link rel="stylesheet" type="text/css" href="mystyle.css" />

    但是，在我們的React專案中採用的是虛擬DOM，元件也是放在一個個的JS檔案中，所以CSS的使用和引入方式就略有不同。下面通過例項來進行介紹。

    首先，通過編輯器進入React專案目錄：

    這是在之前的文章中搭建完的React專案，各位也可以自行建立。下面的例項將在Page1這個元件中進行。

    首先來檢視Page1的內容：

import React from 'react';

class Page1 extends React.Component{
render(){
return(
<div>
<div>This is Page1!</div>
</div>
);
}
}

export default Page1;



export default Page1;
 

    使用 npm start 啟動專案後，Page1元件顯示如下：

    下面將來更改<div>This is Page1!</div>這一標籤的樣式，與HTML中不同，在React專案中新增css樣式的寫法如下：

            <div  style={{ fontSize='16px' }}  >This is Page1!</div>

    檢視上方語句，style=後面跟著的是兩對大括號，與原本的style=" color:red; font-size:16px "不同。而且樣式名稱的命名方式也有所不同，由本來的 font-size 變成了 fontSize，採用了單駝峰式的命名形式（前面單詞小寫，後面單詞大寫開頭）其他的樣式名稱也用同樣的方式來更改，比如用 backgroundColor 來替代 background-color。然後把等號右邊的 16px 加上了引號，作為一個字串傳入。不同樣式欄位之間用逗號隔開而不是分號。有些編輯器會自動提示js檔案中的樣式書寫規範，各位也可以參照網上的一些資料。

    現在通過這一方式來對Page1頁面進行樣式修改，程式碼如下：

import React from 'react';

class Page1 extends React.Component{
render(){
return(
<div>
<div
style={{
width:'200px',
height:'80px',
backgroundColor:'yellow',
fontSize:'24px',
textAlign:'center'
}}
>This is Page1!</div>
</div>
);
}
}

export default Page1;

    為了方面讀程式碼，把這個div標籤寫成上述形式，良好的程式碼書寫習慣有助於程式碼理解和維護，怎麼看舒服怎麼寫。

    然後，我們來檢視 localhost:3000/Page1 （因專案而異）中的內容：

    之前寫的css樣式被應用在了頁面上。

    那麼，還有沒有其他方式來引入CSS樣式。

    我們可以將CSS樣式作為一個物件來引入，該物件的屬性就對應著CSS樣式屬性，我們刪去上文例子中的樣式，建立一個名稱為mystyle的物件：

import React from 'react';

class Page1 extends React.Component{
render(){
let mystyle={
width:'200px',
height:'80px',
backgroundColor:'yellow',
fontSize:'24px',
textAlign:'center'
}
return(
<div>
<div style={mystyle}>This is Page1!</div>
</div>
);
}
}

export default Page1;

    上面程式碼中在元件的render函式裡建立了一個mystyle物件，屬性為CSS樣式的內容，在下方標籤中的style屬性中引入mystyle物件（注意，這裡只有一層大括號），頁面呈現的內容同樣使用了CSS樣式：

      那麼，能否從外部匯入CSS檔案呢，首先我們在同級目錄下建立一個 mystyle.css 檔案，內容如下：

#mydiv{
width:200px;
height:80px;
background-color:yellow;
font-size:24px;
text-align:center
}

    刪去Page1元件中定義的樣式，並給<div>標籤新增 id='mydiv'：

import React from 'react';
require('./mystyle.css');

class Page1 extends React.Component{
render(){
return(
<div>
<div id='mydiv'>This is Page1!</div>
</div>
);
}
}

export default Page1;

    儲存兩個檔案後，就可以在頁面中看到CSS樣式生效的內容：

    現在我們使用三種方式在React專案中使用CSS樣式，除此之外，還有許多其他的方式也可以引入CSS樣式，甚至可以直接在根html檔案中引入，這裡就不做太多介紹。