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

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

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

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

組件中DOM樣式

第一種：行內(nèi)樣式

想給虛擬dom添加行內(nèi)樣式，需要使用表達(dá)式傳入樣式對象的方式來實(shí)現(xiàn)：

// 注意這里的兩個(gè)括號(hào)，第一個(gè)表示我們在要JSX里插入JS了，第二個(gè)是對象的括號(hào)
 
Hello world

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

第二種：className（外部引用）

React推薦我們使用行內(nèi)樣式，因?yàn)镽eact覺得每一個(gè)組件都是一個(gè)獨(dú)立的整體

其實(shí)我們大多數(shù)情況下還是大量的在為元素添加類名，但是需要注意的是，class需要寫成className（因?yàn)楫吘故窃趯戭恓s代碼，會(huì)收到j(luò)s規(guī)則的限制，而class是關(guān)鍵字）

Hello world

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

有時(shí)候需要根據(jù)不同的條件添加不同的樣式，比如：完成狀態(tài)，完成是綠色，未完成是紅色。那么這種情況下，我們推薦使用classname/classnames這個(gè)包：

 第三包c(diǎn)lassname定義 

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

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

styled-components是一個(gè)第三方包，要安裝

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

感謝各位的閱讀！關(guān)于react組件添加樣式的方法有哪些就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！