新增方法：1.使用「style={{樣式程式碼}}」在元件內部定義css樣式；2、先建立style樣式對象，然後在render函數的元件中使用「style={{物件}」語句引用；3、使用「import 'css檔案路徑'」引入外部css檔案。
本教學操作環境：windows7系統、react16版本，Dell G3電腦。
相關教學推薦：React影片教學
相對於html中引用css的三種方法，react中也有三種方法，一一相對：
1、行內樣式：直接在元件內部定義
行內樣式是一種最基本的寫法，也就是我們最開始學HTML時寫的內聯樣式那樣，在專案中可能會比較少用到
在JSX中的用法：
class App extends React.Component {
// ...
render() {
return (
<div style={{ background: '#eee', width: '200px', height: '200px'}}>
<p style= {{color:'red', fontSize:'40px'}}>Second Way!</p>
</div>
)
}
}要注意的是，這裡的css樣式名採用駝峰命名法：如font-size →fontSize，而你需要將CSS屬性放在雙大括號之間。為什麼要用兩個大括號？因為在JSX中渲染的JS表達式，它們必須被放在一對大括號裡，{style}可以視為一個JS物件。所以第一對大括號正是將JS表達式放入JSX解析，裡面的那對大括號則創建了一個style物件實例，所以在這裡style是作為一個物件傳入元件
#2、宣告樣式：
宣告樣式其實是行內樣式的一種改進寫法，在render函數外部建立style對象，然後傳遞給元件，讓css與標籤分離，但實際上樣式多了的話還是不太美觀
class App extends React.Component {
//...
const style1={
background:'#eee',
width:'200px',
height:'200px'
}
const style2={
color:'red',
fontSize:'40px'
}
render() {
return (
<div style={style1}>
<p style= {style2}>Second Way!</p>
</div>
)
}
}注意這裡實用的還是駝峰命名法，其次因為已經在外部聲明了style對象，所以在JSX中使用的時候只需要一個大括號{//.. }
3、引入樣式：引入外部的css文件，外部的css文件就是普通的css，在元件js中的import語句後面使用如下語句。
引入樣式就是將CSS檔案寫下外部，在引入使用，這種普通的引入樣式實際上會有一定的問題，我們先看用法，再分析問題
用法：
css 檔案
.person{
width: 60%;
margin:16px auto;
border: 1px solid #eee;
box-shadow: 0 2px 3px #ccc;
padding:16px;
text-align: center;
}js檔案
import React from 'react';
import './Person.css';
class App extends React.Component {
//....
render() {
return (
<div className='person'>
<p>person:Hello world</p>
</div>
)
}
}
export default App;結果展示：
問題：
因為CSS的規則都是全域的，任何一個元件的樣式規則，都對整個頁面有效，這可能會導致大量的衝突。也就是說如果我有兩個css文件，它們的中的一些樣式名稱是一樣的，那麼就會被覆蓋，簡單的解決辦法就是將樣式的命名變得複雜且不重複，但這樣樣式多了也很難避免重複，而且命名也不會太好看。
更多程式相關知識，請造訪：程式設計教學！ ！
以上是react怎麼添加css樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
