Ant Design Mobile组件库更新之后变化较大，今天搭建项目并自定义主题遇到很多问题，现有的一些博客大多还停留在V2版本，对于新项目的搭建不再适用，甚至会绕很大一段弯路，花了好久的时间终于调好了！！！

1、cmd到项目文件夹下

2、项目创建启动

npm install -g create-react-app  //脚手架安装
create-react-app BossZhaoPin   //创建项目-名称为BossZhaoPin
cd bosszhaopin
npm start  //启动项目

3、修改项目文件夹如下

4、然后开始导入antd mobile UI库

 npm install antd-mobile --save

5、下载两个插件:react-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案），babel-plugin-import （一个用于按需加载组件代码和样式的 babel 插件）。

npm install react-app-rewired -D

npm install babel-plugin-import -D

7、自定义主题，下载less,less-loade

npm install customize-cra --save-dev
npm i less
npm i -D less-loader

8、然后要在根目录下添加个config-overrides.js的文件，内容如下：

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    libraryDirectory: 'es',
    style: true,  //设为less
  })
)

9、在项目中引入antd-mobile并自定义主题

// 入口文件index.js
import ReactDOM from 'react-dom/client'
import { Button } from 'antd-mobile/es'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Button block color="primary" size="large">
    按钮
  </Button>
)

效果图

问题汇总

V2配置如下

//index.js

import ReactDOM from 'react-dom/client'
import { Button } from 'antd-mobile'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Button type="primary"> 按钮  </Button>
)

//config-overrides.js

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
 
module.exports = override(
    addLessLoader({
      javascriptEnabled: true,
      modifyVars: {'@brand-primary': '#1DA57A'},
    }),
    fixBabelImports('import', {
      libraryName: 'antd-mobile',
      libraryDirectory: 'es',
      style: true,
    }),
);

报错

官网说法FAQ - Ant Design Mobile

umi 项目安装 antd-mobile v5 后报错如何解决？

由于旧版本的 umi 插件和 antd-mobile v5 有一定的冲突，所以你可能会遇到类似下面这样的报错：

These dependencies were not found:

* antd-mobile/es/button in ./src/pages/home-my/index.tsx

* antd-mobile/es/button/style in ./src/pages/home-my/index.tsx

解决方法就是对插件进行一下升级：

如果你的项目中依赖了 @umijs/preset-react （可以在 package.json 文件中看到），那么请把它升级到最新版
如果你的项目中依赖了 @umijs/plugin-antd （可以在 package.json 文件中看到），那么请把它升级到最新版
如果你的项目中上述两个 npm 包都没有依赖，那么可以安装最新版的 @umijs/plugin-antd-mobile 插件

我试了没有任何效果！！！

最后！！！

antd-mobile引入改成 import { Button } from 'antd-mobile/es' 项目启动成功

//index.js

import ReactDOM from 'react-dom/client'
import { Button } from 'antd-mobile/es'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Button type="primary"> 按钮  </Button>
)

但是，主题颜色并没有生效

看了官网才知道V5自定义主题原来这么简单！！！

官方说法

得益于 CSS 变量强大而灵活的能力，自定义一套 antd-mobile 的主题是非常简单的，你不需要配置任何编译工具，也不需要安装额外的插件，直接修在 :root 覆盖 CSS 变量就可以了：

:root:root {

    --adm-color-primary: #a062d4;

}

注：为什么要写两个重复的 :root？

由于 antd-mobile 中的主题变量也是在 :root 下声明的，所以在有些情况下会由于优先级的问题无法成功覆盖。通过 :root:root 可以显式地让你所写内容的优先级更高一些，从而确保主题变量的成功覆盖。

当然如果你只是希望对局部的主题进行调整，也可以把上面的 CSS 变量覆盖逻辑加在任何一个你想调整的节点上，例如：

.purple-theme {

   --adm-color-primary: #a062d4;

}

<div className='purple-theme'>

   <Button color='primary'>Purple</Button>

</div>

可以得到这样的一个按钮：

个人尝试

新建style.css

:root:root {
  --adm-color-primary: #62d47b;
}

删除config-overrides.js中的 addLessLoader

// 修改入口文件

import ReactDOM from 'react-dom/client'
import { Button } from 'antd-mobile/es'
import './style.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Button color='primary'>
    按钮
  </Button>
)

自定义颜色配置成功啦~

React18+ant-mobileV5移动端项目搭建并自定义主题