React 中使用CSS的幾種方式

2021-09-26 09:37:35 字數 3837 閱讀 6598

不需要元件從外部引入css檔案，直接在元件中書寫。

import react,


from


"react"


;const div1 =


;class


test


extends


component


render()


>


123<


/div>


"background-color:red;"


>


<


/div>);


}}export


default test;
注意事項:

在正常的css中，比如background-color，box-sizing等屬性，在style物件div1中的屬性中，必須轉換成駝峰法，backgroundcolor，boxsizing。而沒有連字元的屬性，如margin，width等，則在style物件中不變。

在正常的css中，css的值不需要用雙引號("")，如

而在react中使用style物件的方式時。值必須用雙引號包裹起來。

這種方式的react樣式，只作用於當前元件。

需要在當前元件開頭使用import引入css檔案。

import react,


from


"react"


;import testchidren from


"./testchidren"


;import


"@/assets/css/index.css"


;class


test


extends


component


render()


}export


default test;
這種方式引入的css樣式，會作用於當前元件及其所有後代元件。

引入react內部已經支援了字尾為scss的檔案，所以只需要安裝node-sass即可，因為有個node-sass，scss檔案才能在node環境上編譯成css檔案。

yarn add node-sass

然後編寫scss檔案



}
關於如何詳細的使用sass，請檢視sass官網

這種方式引入的css樣式，同樣會作用於當前元件及其所有後代元件。

將css檔案作為乙個模組引入，這個模組中的所有css，只作用於當前元件。不會影響當前元件的後代元件。

import react,


from


"react"


;import testchild from


"./testchild"


;import modulecss from


"./test.module.css"


;class


test


extends


component


render()


>


321321


<


/div>


<


/testchild>


<


/div>);


}}export


default test;
這種方式可以看做是前面第一種在元件中使用style的公升級版。完全將css和元件分離開，又不會影響其他元件。

類似於第四種，區別是第四種引入css module，而這種是引入 scss module而已。

import react,


from


"react"


;import testchild from


"./testchild"


;import modulecss from


"./test.module.scss"


;class


test


extends


component


render()


>


321321


<


/div>


<


/testchild>


<


/div>);


}}export


default test;
同樣這種方式可以看做是前面第一種在元件中使用style的公升級版。

需要先安裝

yarn add styled-components

然後建立乙個js檔案(注意是js檔案，不是css檔案)



import styled,


from


"styled-components"


;export


const selflink = styled.div`


height: 50px;


border: 1px solid red;


color: yellow;`;


export


const selfbutton = styled.div`


height: 150px;


width: 150px;


color: $;


background-image: url($);


background-size: 150px 150px;


`;
元件中使用styled-components樣式

import react,


from


"react"


;import


from


"./style"


;class


test


extends


component


render()


} src=


>


selfbutton


<


/selfbutton>


<


/div>);


}}export


default test;
這種方式是將整個css樣式，和html節點整體合併成乙個元件。引入這個元件html和css都有了。它的好處在於可以隨時通過往元件上傳入 屬性，來動態的改變樣式。對於處理變數、**查詢、偽類等較方便的。

這種方式的css也只對當前元件有效。具體用法，請檢視styled-components官網。

第七種: 使用radium

需要先安裝

yarn add radium

然後在react元件中直接引入使用

import react,


from


"react"


;import radium from


'radium'


;let styles =},


primary:


, warning:};


class


test


extends


component


render()


>


this is a primary button


<


/button>


<


/div>);


}}export


default


radium


(test)


;
對於處理變數、**查詢、偽類等是不方便的。使用radium可以直接處理變數、**查詢、偽類等，並且可以直接使用js中的數學，連線，正規表示式，條件，函式等。

具體用法請檢視radium原始碼

注意：在export之前，必須用radium包裹。

Yii中使用datepicker的幾種方式

一，前端展示 b 例1，最簡單好用的方式。簡單在於不需要 model b 例2 例3 其他引數，可以參考jquery datepicker手冊，然後將其放在上面的options裡，並用單引號引起來。如設定最小日期為當前日期 mindate new date 二，後端獲取 可以通過上面 model來獲...

React 中使用CSS的7種方法

第一種 在元件中直接使用style 不需要元件從外部引入css檔案，直接在元件中書寫。import react,from react const div1 class test extends component render export default test 注意事項 在正常的css中，比如...

在HTML中使用CSS樣式的幾種方式

就是在html的標籤中使用style屬性來設定css樣式 格式 被修飾的內容style color orange font size 18px 在html中如何使用css樣式p 特點 僅作用於本標籤。就是在head標籤中使用標籤來設定css樣式 格式 特點 作用於當前整個頁面 3.1 推薦 就是在h...