react中使用antd并改變其主題顏色的正確打開方式
今天在使用antd的時候经备，默認的藍色讓我有一種土土的感覺。既然antd官方提供了改變主題的方法号显，為什么不嘗試一下呢蛇数。但是我功力尚淺，通過釋放配置文件進行更改操作帶來的是一波接著一波的報錯批销。直到閱讀了官方文檔之后洒闸，我才發(fā)現(xiàn)了正確的打開方式。
第一步
和往常一樣均芽，第一步首先要做的就是進行一波插件的安裝丘逸，這里我們要用到的插件有：
antd -- 使用antd當然要先引入antd啦
react-app-rewired -- 這是一個對create-react-app腳手架進行自定義配置的社區(qū)解決方案
customize-cra -- 這個是為了能夠使用react-app-rewired@2.x而需要的插件
babel-plugin-import -- 這個是按需加載組件代碼和樣式的Babel插件，可以很好的解決前端的性能問題
less & less-loader -- 這是我們的老朋友了
//安裝一下需要的插件
yarn add antd react-app-rewired customize-cra babel-plugin-import less less-loader
第二步
第二步需要更改一下package.json文件掀宋，很簡單深纲，只需要將：
"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",
}
就可以啦
第三步
第三步是跟關鍵的一步，首先我們需要在根目錄下創(chuàng)建一個叫做config-overrides.js的文件劲妙，然后再里面填入：
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
//寫了下面這個部分湃鹊，就實現(xiàn)了按需加載，再也不需要再每個頁面里面都引入“antd/dist/antd.css”啦
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true //這里一定要寫true镣奋，css和less都不行哦
}),
addLessLoader({
javascriptEnabled: true,
//下面這行很特殊币呵，這里是更改主題的關鍵，這里我只更改了主色侨颈，當然還可以更改其他的余赢，下面會詳細寫出。
modifyVars: { "@primary-color": "#f47983"}
})
)
這里我選擇我最愛的死亡芭比粉(快樂起來了呢９浮妻柒！)，大家也可以選擇自己喜歡的顏色温赔。
備注
當然除了全局主色蛤奢，還可以更改很多選項鬼癣，這里都統(tǒng)一列出來：
@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 鏈接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 錯誤色
@font-size-base: 14px; // 主字號
@heading-color: rgba(0, 0, 0, .85); // 標題色
@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); // 浮層陰影
死亡芭比粉
沉寂在死亡芭比粉中無法自拔：）
