react 引入antd並制定主題

引入antd並制定主題

本節引用於antd的官方文檔

這是 create-react-app 生成的默認目錄結構。

├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
└── yarn.lock
複製代碼

如今從 yarn 或 npm 安裝並引入 antd。

yarn add antd
複製代碼

修改 src/App.js，引入 antd 的按鈕組件。

import React from 'react';
import {Button} from 'antd'
import './App.css';

function App() {
  return (
    <div className="App">
      <Button type="primary">Button</Button>
    </div>
  );
}

export default App;
複製代碼

修改 src/App.css，在文件頂部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

...
複製代碼

好了，如今你應該能看到頁面上已經有了 antd 的藍色按鈕組件，接下來就能夠繼續選用其餘組件開發應用了。

高級配置

咱們如今已經把組件成功運行起來了，可是在實際開發過程當中還有不少問題，例如上面的例子實際上加載了所有的 antd 組件的樣式。

此時咱們須要對 create-react-app 的默認配置進行自定義，這裏咱們使用 react-app-rewired （一個對 create-react-app 進行自定義配置的社區解決方案）。

yarn add react-app-rewired customize-cra
複製代碼

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}
複製代碼

而後在項目根目錄建立一個 config-overrides.js 用於修改默認配置。

使用 babel-plugin-import

注意：antd 默認支持基於 ES module 的 tree shaking，js 代碼部分不使用這個插件也會有按需加載的效果。

babel-plugin-import 是一個用於按需加載組件代碼和樣式的 babel 插件（原理），如今咱們嘗試安裝它並修改 config-overrides.js 文件。

yarn add babel-plugin-import
複製代碼

而後移除前面在 src/App.css 裏全量添加的 @import '~antd/dist/antd.css'; 樣式代碼，而且按下面的格式引入模塊。

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

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );
複製代碼

最後重啓yarn start訪問頁面，antd 組件的 js 和 css 代碼都會按需加載

自定義主題

按照 配置主題 的要求，自定義主題須要用到 less 變量覆蓋功能。咱們能夠引入 customize-cra 中提供的 less 相關的函數 addLessLoader 來幫助加載 less 樣式，同時修改 config-overrides.js 文件以下。

yarn add less less-loader
複製代碼

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { 
+    '@primary-color': '#1DA57A'
+    '@link-color': '#1890ff', // 連接色
+    '@success-color': '#52c41a', // 成功色
+    '@warning-color': '#faad14', // 警告色
+    '@error-color': '#f5222d', // 錯誤色
+    '@font-size-base': '14px', // 主字號
+    '@heading-color': 'rgba(0, 0, 0, 0.85)', // 標題色
+    '@text-color': 'rgba(0, 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, 0.15)', // 浮層陰影},
+ }),
);
複製代碼

這裏利用了 less-loader 的 modifyVars 來進行主題配置，變量和其餘配置方式能夠參考 配置主題 文檔。

修改後重啓 yarn start，若是看到一個綠色的按鈕就說明配置成功了。

更多主題定製方案可參考官網【定製主題】

eject

你也可使用 create-react-app 提供的 yarn run eject 命令將全部內建的配置暴露出來。

參考如下文章進行antd配置： react暴露後，webpack4.19.1實現按需加載antd