我已經(jīng)學(xué)了挺好的，分享給大家一起學(xué)習(xí)

手機(jī)上綠色圖標(biāo)軟件??搜下面數(shù)字就可以啦

373871949

備注需要哪個(gè)哦~~~~

課程簡(jiǎn)介：

課程內(nèi)容全維度更新為Vue3.0 融合企業(yè)技術(shù)，注重react人才培養(yǎng)?。?！

六維全息課程覆蓋職場(chǎng)求職與職后發(fā)展，助力學(xué)員從全棧工程師向架構(gòu)師進(jìn)階！9大真實(shí)企業(yè)項(xiàng)目助力it就業(yè)。

淺談antd@5運(yùn)用心得

千峰HTML5大前端面授2022年9月Vue3.0完結(jié)

download：https://www.zxit666.com/5638/

antd v5版本發(fā)布至今已有整整4個(gè)月了，在v5版本發(fā)布后我也是第一時(shí)間把之前v4項(xiàng)目遷移到了v5，關(guān)于此次晉級(jí)還是有很大的變化跟改良的，故在此淺聊一下我的遷移閱歷和倡議，前提是你曾經(jīng)通讀過(guò)官方的遷移指南。

嚴(yán)重改良

除了 ui 作風(fēng)變化、更好的支持 Typescript、優(yōu)化底層庫(kù)的依賴等，我覺(jué)得此次大版本更新帶來(lái)最大的變化是 CSS-in-JS 替代本來(lái) less 的技術(shù)計(jì)劃變卦。升至v5后 antd 產(chǎn)物不再導(dǎo)出 css 文件，只要一個(gè) reset.css ，況且這個(gè)重置款式文件也只是為了讓開(kāi)發(fā)者不再去依賴其他的諸如 Normalize.css 的第三方庫(kù)。

為什么說(shuō)這是一次嚴(yán)重改良？做過(guò) antd 切換主題功用的開(kāi)發(fā)者應(yīng)該深有領(lǐng)會(huì)，。流程是先提早編譯出來(lái)每種形式下的對(duì)應(yīng) less 文件，然后經(jīng)過(guò)包裹 antd 提供的 ConfigProvider ，依據(jù) mode 的變幻動(dòng)態(tài)傳值修正 prefixCls 的值以動(dòng)態(tài)修正組件內(nèi)的款式，這樣做有以下幾種弊端：

每加一種主題就要編譯一套less，雖然有很多反復(fù)的款式代碼。

使得項(xiàng)目打包后的體積變得越來(lái)越臃腫。

維護(hù)起來(lái)十分費(fèi)力，由于每改一個(gè) antd 組件的通用款式就要同時(shí)去修正每套主題下的 less 文件對(duì)應(yīng)的相同代碼，雖然他們只要 prefixCls 不同。

修正款式要格外注重款式權(quán)重問(wèn)題，加重了開(kāi)發(fā)者的心智擔(dān)負(fù)。

修正主題可能會(huì)破費(fèi)更多的時(shí)間和寫(xiě)更多的代碼，由于開(kāi)發(fā)者需求去找到修正款式的元素的dom層級(jí)，然后在款式文件中為了權(quán)重問(wèn)題需求寫(xiě) full path。

...（我沒(méi)閱歷過(guò)的其他問(wèn)題）

而采用 CSS-in-JS 這樣的技術(shù)計(jì)劃則會(huì)大大改善以上問(wèn)題的呈現(xiàn)：

首先它是一種將 css 代碼寫(xiě)成 JavaScript 對(duì)象或函數(shù)的辦法，因而能夠經(jīng)過(guò)運(yùn)用變量、函數(shù)等動(dòng)態(tài)生成款式，便當(dāng)響應(yīng)式設(shè)計(jì)。

并且相比 less 它作用域控制更容易，因而很好的處理了命名抵觸和款式權(quán)重的問(wèn)題。

在一定水平上他處理了一局部性能優(yōu)化的問(wèn)題，由于減少了懇求 css 款式文件的 http 懇求。

遷移指南

假如項(xiàng)目中沒(méi)有除了黑夜\白晝形式以外的其他主題，并且沒(méi)有適配 IE 閱讀器的需求，那么祝賀你，遷移此項(xiàng)目的本錢(qián)將是十分輕量級(jí)的，直接 yarn add antd 晉級(jí)庫(kù)版本，移除 v4 項(xiàng)目中援用到的 antd 內(nèi)置的文件（antd/dist/antd.css），之前在 less 文件中經(jīng)過(guò) :global 去修正 antd 組件默許款式的行為同樣會(huì)生效，假如之前做了主題切換功用的項(xiàng)目同樣也能夠把之前的主題款式文件刪了，antd 內(nèi)置了白晝（default）、黑夜形式和緊湊形式的算法（algorithm）。這個(gè) algorithm 在表現(xiàn)上來(lái)看能夠了解為作風(fēng)或者主題吧。那假如要修正單個(gè)組件的款式，比方antd 按鈕默許高度為32，在某個(gè)業(yè)務(wù)場(chǎng)景下，這個(gè)按鈕需求改成40，那么能夠修正主題中的 token 去完成這一目的而不用去修正款式文件，這個(gè) token 怎樣了解？能夠看成是組成一個(gè)組件的每個(gè)顆粒化的款式，也就是一些款式變量名而已。

那么，為什么修正 、token 的計(jì)劃會(huì)比之前修正款式文件的計(jì)劃要更優(yōu)

那如何完成更多的自定義主題呢？其實(shí)思緒跟v4是一樣的，修正款式變量值，只不過(guò)在v5中是經(jīng)過(guò)修正js變量，而在以前的版本是修正 less 變量，詳細(xì)完成辦法能夠參考 antd v5 版本中 default（對(duì)應(yīng)源碼 components/theme/themes/default(或者dark)），實(shí)質(zhì)上是覆寫(xiě)變量值，只是變量名需求逐個(gè)對(duì)應(yīng)起來(lái)。

開(kāi)發(fā)時(shí)運(yùn)用技巧

運(yùn)用v5版本這么長(zhǎng)時(shí)間以來(lái)，除了在 nextjs 項(xiàng)目中最初版本會(huì)有水合問(wèn)題以外，最大的問(wèn)題就是你想去修正某個(gè)組件的某個(gè)部分款式，但是不曉得對(duì)應(yīng)的變量名，我的倡議是 clone 一份 antd 最新版本的源碼，在不曉得變量名（token）的時(shí)分去源碼中 components 目錄下找到你要的組件，然后找到其下的 style 目錄，找到對(duì)應(yīng)款式下它援用的 token 屬性名，以 Button 組件的背風(fēng)光為例：

那么，修正 colorBgContainer 就ok了：

<ConfigProvider

theme={{

token: {

colorPrimary: '#FF9B50', // 主題色

colorBgContainer: '#FF9B50' // 寫(xiě)在這里跟寫(xiě)在下面都一樣

},

components: {

Button: { controlHeight: 50, colorBgContainer: '#FF9B50' }

}

}}

>

<Button className={styles.btn} onClick={handleDeposit}>

<span style={{ color: '#fff' }}>

{isConnected ? `Deposit 3 ETH` : 'Unlock WalletConnect'}

</span>

</Button>

</ConfigProvider>

假如你只是針對(duì)某個(gè)業(yè)務(wù)場(chǎng)景下的某個(gè)組件修正部分款式，倡議寫(xiě)在 components 下，假如是某個(gè)模塊中通用的款式，則選擇 token，實(shí)質(zhì)上都是修正 token，只是劃分區(qū)域更細(xì)致化而已。

本文使用 文章同步助手 同步