這篇文章給大家分享的是有關react組件添加樣式的方法有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯專注于彭澤企業(yè)網站建設,成都響應式網站建設,購物商城網站建設。彭澤網站建設公司,為彭澤等地區(qū)提供建站服務。全流程定制網站，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯專業(yè)和態(tài)度為您提供的服務

react組件添加樣式的方法：1、通過表達式傳入樣式對象的方式來實現；2、通過使用行內樣式；3、通過第三方包定義類名；4、通過樣式組件“styled-components”添加樣式。

React組件添加樣式的四種方式

組件中DOM樣式

第一種：行內樣式

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

// 注意這里的兩個括號，第一個表示我們在要JSX里插入JS了，第二個是對象的括號
 <p style={{color:'red', fontSize:'14px'}}>Hello world</p>

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

第二種：className（外部引用）

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

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

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

第三種：classname/classnames第三方包定義類名

有時候需要根據不同的條件添加不同的樣式，比如：完成狀態(tài)，完成是綠色，未完成是紅色。那么這種情況下，我們推薦使用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組件添加樣式的方法有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

文章名稱：react組件添加樣式的方法有哪些
轉載注明：http://jinyejixie.com/article38/psiosp.html

成都網站建設公司_創(chuàng)新互聯，為您提供全網營銷推廣、靜態(tài)網站、營銷型網站建設、外貿建站、外貿網站建設、軟件開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯