react元件添加樣式的方法

react元件添加樣式的方法：1、透過表達式傳入樣式物件的方式來實現；2、透過使用行內樣式；3、透過第三方包定義類別名稱；4、透過樣式元件「 styled-components」加入樣式。

本教學操作環境：windows7系統、React16版，此方法適用於所有品牌電腦。

React元件新增樣式的四種方式：

元件中DOM樣式

第一種：行內樣式

#想為虛擬dom添加行內樣式，需要使用表達式傳入樣式對象的方式來實現：

// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
 <p style={{color:&#39;red&#39;, fontSize:&#39;14px&#39;}}>Hello world</p>

行內樣式需要寫入一個樣式對象，而這個樣式對象的位置可以放在很多地方，例如render函數裡、元件原型上、外鏈js檔案中

第二種：className（外部參考）

React推薦我們使用行內樣式，因為React覺得每個元件都是獨立的整體

其實我們大多數情況下還是大量的在為元素添加類別名，但要注意的是，class需要寫成className（因為畢竟是在寫類別js程式碼，會收到js規則的限制，而class是關鍵字）

<p className="hello" style = {this.style}>Hello world</p>

第三種：classname/classnames第三方套件定義類別名稱

有時需要根據不同的條件添加不同的樣式，例如：完成狀態，完成是綠色，未完成是紅色。那麼這種情況下，我們推薦使用classname/classnames這個套件：

<p
    className = { 
        classname({
            size: true,
            bg: true
        })
    }
> 第三包classname定义 </p>

第四種：樣式元件（styled-components）

styled-components是針對React寫的一套css -in-js框架，簡單來講就是在js中寫css。 npm連結

styled-components是一個第三方包，要安裝

const Container = styled.div`
    width: 100px;
    height: 100px;
    background: pink;
    color: white;
`

以上是react元件添加樣式的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！