create-react-app中使用antd並且改變主題

萱萱爸爸愛搬磚發表於2019-04-20
ReactAPP

第一步

// 安裝一下需要的插
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",
}
複製程式碼

第三步

在跟目錄建立一個config-overrides.js的檔案，內容為:

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

module.exports = override(
    //寫了下面這個部分，就實現了按需載入，再也不需要再每個頁面裡面都引入“antd/dist/antd.css”
    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true  //這裡一定要寫true，css和less都不行
    }),
    addLessLoader({
      javascriptEnabled: true,
      //下面這行很特殊，這裡是更改主題的關鍵，這裡我只更改了主色，當然還可以更改其他的，下面會詳細寫出。
      modifyVars: { "@primary-color": "#f47983"}
    })
)
複製程式碼

這裡除了可以配置全域性主色，還可以更改很多選項：

@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);  // 浮層陰影
複製程式碼

相關文章