ReactUI 组件库 AntDesign使用笔记

UI 组件库 AntDesign 初步使用笔记。

安装

yarn add antd

样式问题

由于安装后根据官方的指引，页面 并未引入样式，所以还需要额外在引入import 'antd/dist/antd.css';,这样可以全部引入样式。也可以进行按需引入。

修改脚手架配置（不推荐）

yarn eject 确认暴漏配置。如果报错的话，请确认是否有存在git请求没有提交的问题，只要提交即可。

执行后会多出config、script两个文件夹，在里面修改（太复杂，不推荐）

引入 react-app-rewired 并修改 package.json 里的启动配置。

Ant推荐方式（推荐）

无需暴漏配置，需要先安装下面的库。但是后续脚手架启动方式会变。

安装 yarn add @craco/craco

进入根目录的package.json修改

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}


// 修改为
 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },

修改后在根目录创建craco.config.js用于修改默认配置。

// 配置具体的修改规则
const { override, fixBabelImports } = require("customize-cra");

module.exports = override(
    // 暂时先空着，后面配置主题需要一起使用
);

自定义主题

先安装yarn add craco-less

在src目录下创建App.less文件，并在App.js文件引入import './App.less';

// App.less
@import '~antd/dist/antd.less';

然后在将craco.config.js文件修改如下

const CracoLessPlugin = require("craco-less");

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { "@primary-color": "#1890ff" },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
};