react中使用antd并改變其主題顏色的正確打開方式

今天在使用antd的時(shí)候，默認(rèn)的藍(lán)色讓我有一種土土的感覺(jué)。既然antd官方提供了改變主題的方法，為什么不嘗試一下呢。但是我功力尚淺，通過(guò)釋放配置文件進(jìn)行更改操作帶來(lái)的是一波接著一波的報(bào)錯(cuò)。直到閱讀了官方文檔之后，我才發(fā)現(xiàn)了正確的打開方式。

第一步

和往常一樣，第一步首先要做的就是進(jìn)行一波插件的安裝，這里我們要用到的插件有：

antd -- 使用antd當(dāng)然要先引入antd啦
react-app-rewired -- 這是一個(gè)對(duì)create-react-app腳手架進(jìn)行自定義配置的社區(qū)解決方案
customize-cra -- 這個(gè)是為了能夠使用react-app-rewired@2.x而需要的插件
babel-plugin-import -- 這個(gè)是按需加載組件代碼和樣式的Babel插件，可以很好的解決前端的性能問(wèn)題
less & less-loader -- 這是我們的老朋友了

//安裝一下需要的插件
yarn add antd react-app-rewired customize-cra babel-plugin-import less less-loader

第二步

第二步需要更改一下package.json文件，很簡(jiǎn)單，只需要將：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
}

更改為：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
}

就可以啦

第三步

第三步是跟關(guān)鍵的一步，首先我們需要在根目錄下創(chuàng)建一個(gè)叫做config-overrides.js的文件，然后再里面填入：

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
    //寫了下面這個(gè)部分，就實(shí)現(xiàn)了按需加載，再也不需要再每個(gè)頁(yè)面里面都引入“antd/dist/antd.css”啦
    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true  //這里一定要寫true，css和less都不行哦
    }),
    addLessLoader({
      javascriptEnabled: true,
      //下面這行很特殊，這里是更改主題的關(guān)鍵，這里我只更改了主色，當(dāng)然還可以更改其他的，下面會(huì)詳細(xì)寫出。
      modifyVars: { "@primary-color": "#f47983"}
    })
)

這里我選擇我最愛的死亡芭比粉(快樂(lè)起來(lái)了呢??！)，大家也可以選擇自己喜歡的顏色。

備注

當(dāng)然除了全局主色，還可以更改很多選項(xiàng)，這里都統(tǒng)一列出來(lái)：

@primary-color: #1890ff;                         // 全局主色
@link-color: #1890ff;                            // 鏈接色
@success-color: #52c41a;                         // 成功色
@warning-color: #faad14;                         // 警告色
@error-color: #f5222d;                           // 錯(cuò)誤色
@font-size-base: 14px;                           // 主字號(hào)
@heading-color: rgba(0, 0, 0, .85);              // 標(biāo)題色
@text-color: rgba(0, 0, 0, .65);                 // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45);      // 次文本色
@disabled-color : rgba(0, 0, 0, .25);            // 失效色
@border-radius-base: 4px;                        // 組件/浮層圓角
@border-color-base: #d9d9d9;                     // 邊框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);  // 浮層陰影

死亡芭比粉

沉寂在死亡芭比粉中無(wú)法自拔：）