React使用CSS的方法小結

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

import react, from 「react」;const div1 = ;class test extends component render() }export default test;

注意事項:

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

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

需要在當前元件開頭使用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檔案

import react, from 「react」;import testchild from 「./testchild」;import modulecss from 「./test.module.css」;class test extends component render() }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() }export default test;

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

需要先安裝

yarn add styled-components

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

ps

=>pr

ops.

colo

r;ba

ckgr

ound

−ima

ge:u

rl

(; background-image: url(

props=

>pr

ops.

colo

r;ba

ckgr

ound

−ima

ge:u

rl(); background-size: 150px 150px;;

元件中使用styled-components樣式

import react, from 「react」;import from 「./style」;class test extends component render() }export default test;

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

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

需要先安裝

yarn add radium

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

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

具體用法請檢視radium原始碼

ps：在export之前，必須用radium包裹

react 使用小結

1 動態獲取object資料，必須給資料乙個初始值，否則無法呼叫，物件裡面的資料，跑出錯誤 2 請求的資料最好在 componentdidmount 中，有動態更新的資料，用state儲存，或者使用 mobx redux 進行資料管理，其他的如 componentdidupdate使用起來非常消耗效...

React 使用小結 二

為了實現登入狀態的儲存，我今天粗略的學習了下redux。大的問題沒遇到，小問題還是挺多的，做下記錄。redux其實可以看成mvc中的m，雖然他需要自己寫一些處理函式之類的，但仍然無法改變其只是作為狀態儲存容器的這個角色。使用還是很簡單的。但是有一點需要注意，在使用provider的時候，需要給pro...

React 中使用CSS的7種方法

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