来升级到 antd@5 吧

[chenshuai2144]

这里可以写所有升级antd@5 碰到的问题 或者 需求

[chenshuai2144]

antd@4 也需要一个 useToken 来帮助组件库做到互相兼容

具体方案

https://github.com/react-component/util/blob/master/src/hooks/useId.ts#L3

[spt110]

formily-antd-v5升级说明
1.以下升级到最新:
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@formily/antd-v5": "1.0.1-rc.1",
"@formily/core": "^2.2.19",
"@formily/json-schema": "^2.2.19",
"@formily/path": "^2.2.19",
"@formily/react": "^2.2.19",
"@formily/reactive": "^2.2.19",
"@formily/reactive-react": "^2.2.19",
"@formily/shared": "^2.2.19",

2.添加安装
"@ant-design/antd-theme-variable": "^1.0.0",
"rc-util": "^5.28.0",

3.umi4 添加配置
import theme from '@ant-design/antd-theme-variable';
export default {
npmClient: 'pnpm',
theme: {
'@ant-prefix': 'ant',
...theme,
'@s-site-menu-width': '258px',
'@root-entry-name': 'variable',
'@border-radius-base': '4px',
'@primary-color': '#1677FF',
'@error-color': '#ff4d4',
'@info-color': '#52c41a',
'@warning-color': '#faad14',
},
alias: {
'@formily/antd': '@formily/antd-v5',
}

4.umi4 删除配置 babel-plugin-import
export default {
extraBabelPlugins: [
// [
// 'babel-plugin-import',
// { libraryName: 'antd', libraryDirectory: 'es', style: true },
// 'antd',
// ],
// [
// 'babel-plugin-import',
// { libraryName: '@formily/antd-v5', libraryDirectory: 'esm', style: true },
// '@formily/antd',
// ],
],
}
5. 删除所有 antd/es/style/themes/index.less'
//@import (reference) '~antd/es/style/themes/index.less';

[qingbopro]

没有生效....

// https://umijs.org/config/
import theme from '@ant-design/antd-theme-variable';
import { defineConfig } from '@umijs/max';
import { join } from 'path';

import proxy from './proxy';
import routes from './routes';

const { REACT_APP_ENV = 'dev' } = process.env;
const config: ReturnType = defineConfig({
/**

• @name 开启 hash 模式
• @description 让 build 之后的产物包含 hash 后缀。通常用于增量发布和避免浏览器加载缓存。
• @doc https://umijs.org/docs/api/config#hash
  /
  hash: true,
  favicons: ['/favicon.png'],
  tailwindcss: {},
  /*
• @name 兼容性设置
• @description 设置 ie11 不一定完美兼容，需要检查自己使用的所有依赖
• @doc https://umijs.org/docs/api/config#targets
  /
  // targets: {
  // ie: 11,
  // },
  /*
• @name 路由的配置，不在路由中引入的文件不会编译
• @description 只支持 path，component，routes，redirect，wrappers，title 的配置
• @doc https://umijs.org/docs/guides/routes
  /
  // umi routes: https://umijs.org/docs/routing
  routes,
  /*
• @name 主题的配置
• @description 虽然叫主题，但是其实只是 less 的变量设置
• @doc antd的主题设置 https://ant.design/docs/react/customize-theme-cn
• @doc umi 的theme 配置 https://umijs.org/docs/api/config#theme
  /
  // theme: {
  // // 如果不想要 configProvide 动态设置主题需要把这个设置为 default
  // // 只有设置为 variable， 才能使用 configProvide 动态设置主色调
  // // 'root-entry-name': 'variable',
  // // theme: { '@primary-color': '#9e1082' },
  // },
  // lessLoader: {
  // modifyVars: {
  // '@primary-color': '#9e1082',
  // },
  // javascriptEnabled: true,
  // },
  /*
• @name moment 的国际化配置
• @description 如果对国际化没有要求，打开之后能减少js的包大小
• @doc https://umijs.org/docs/api/config#ignoremomentlocale
  /
  ignoreMomentLocale: true,
  /*
• @name 代理配置
• @description 可以让你的本地服务器代理到你的服务器上，这样你就可以访问服务器的数据了
• @see 要注意以下 代理只能在本地开发时使用，build 之后就无法使用了。
• @doc 代理介绍 https://umijs.org/docs/guides/proxy
• @doc 代理配置 https://umijs.org/docs/api/config#proxy
  /
  proxy: proxy[REACT_APP_ENV as keyof typeof proxy],
  /*
• @name 快速热更新配置
• @description 一个不错的热更新组件，更新时可以保留 state
  /
  fastRefresh: true,
  //============== 以下都是max的插件配置 ===============
  /*
• @name 数据流插件
• @@doc https://umijs.org/docs/max/data-flow
  /
  model: {},
  /*
• 一个全局的初始数据流，可以用它在插件之间共享数据
• @description 可以用来存放一些全局的数据，比如用户信息，或者一些全局的状态，全局初始状态在整个 Umi 项目的最开始创建。
• @doc https://umijs.org/docs/max/data-flow#%E5%85%A8%E5%B1%80%E5%88%9D%E5%A7%8B%E7%8A%B6%E6%80%81
  /
  initialState: {},
  /*
• @name layout 插件
• @doc https://umijs.org/docs/max/layout-menu
  /
  title: '易数',
  layout: {
  locale: false,
  },
  /*
• @name moment2dayjs 插件
• @description 将项目中的 moment 替换为 dayjs
• @doc https://umijs.org/docs/max/moment2dayjs
  /
  moment2dayjs: {
  preset: 'antd',
  plugins: ['duration'],
  },
  /*
• @name antd 插件
• @description 内置了 babel import 插件
• @doc https://umijs.org/docs/max/antd#antd
  /
  // antd: {
  // theme: {
  // token: {
  // colorPrimary: '#9e1082',
  // },
  // },
  // },
  // theme: {
  // // '@ant-prefix': 'ant',
  // // ...theme,
  // // '@s-site-menu-width': '258px',
  // // '@root-entry-name': 'variable',
  // // '@border-radius-base': '4px',
  // '@primary-color': '#9e1082',
  // // '@error-color': '#ff4d4',
  // // '@info-color': '#52c41a',
  // // '@warning-color': '#faad14',
  // },
  /*
• @name 网络请求配置
• @description 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
• @doc https://umijs.org/docs/max/request
  /
  request: {
  dataField: 'data',
  },
  /*
• @name 权限插件
• @description 基于 initialState 的权限插件，必须先打开 initialState
• @doc https://umijs.org/docs/max/access
  /
  access: {},
  /*
• @name 中额外的 script
• @description 配置 中额外的 script
  /
  headScripts: [
  // 解决首次加载时白屏的问题
  // {
  // src: '/scripts/loading.js',
  // async: true,
  // },
  ],
  theme: {
  '@ant-prefix': 'ant',
  ...theme,
  '@s-site-menu-width': '258px',
  '@root-entry-name': 'variable',
  '@border-radius-base': '4px',
  '@primary-color': '#9e1082',
  '@error-color': '#ff4d4',
  '@info-color': '#52c41a',
  '@warning-color': '#faad14',
  },
  alias: {
  '@formily/antd': '@formily/antd-v5',
  },
  //================ pro 插件配置 =================
  presets: ['umi-presets-pro'],
  mock: {
  include: ['mock/**/', 'src/pages/**/_mock.ts'],
  },
  mfsu: {
  strategy: 'normal',
  },
  esbuildMinifyIIFE: true,
  requestRecord: {},
  codeSplitting: {
  jsStrategy: 'granularChunks',
  },
  });
  export default config;

"@formily/antd-v5": "^1.2.2",
"antd": "^5.19.1",
"@umijs/max": "^4.1.0",

[chenshuai2144]

如果项目中写了很多的less 变量，项目是无法跑起来的，这里有个兼容方案

const theme = require('@ant-design/antd-theme-variable');

删除 less 引用

- @import (reference) '~antd/es/style/themes/index.less';
- @import (reference) '~antd/es/style/mixins/index.less';

在 umi 中

 theme: {
    '@ant-prefix': 'ant',
+   ...theme,
    '@s-site-menu-width': '258px',
    '@root-entry-name': 'variable',
    '@border-radius-base': '4px',
    '@primary-color': '#1677FF',
    '@error-color': '#ff4d4',
    '@info-color': '#52c41a',
    '@warning-color': '#faad14',
  },

在 webpack 中

{
  loader: "less-loader",
  options: {
    lessOptions: {
      javascriptEnabled: true,
+   modifyVars: { ...theme, "@warning-color": "#faad14" },
    },
  },
};

[ByYogi]

umi项目启动还是报less错误
请您帮我看下怎么解决 @chenshuai2144

兄弟，找了半天解决了。原来是没安装less-loader
相关链接：
https://webpack.docschina.org/loaders/less-loader/
https://blog.csdn.net/fifteen718/article/details/85704899
查看antd样式变量名: https://ant.design/docs/react/customize-theme-cn#seedtoken

相关代码
config.ts

import { theme } from 'antd';
const { defaultAlgorithm, defaultSeed } = theme;
const mapToken = defaultAlgorithm(defaultSeed);
export default defineConfig({
 lessLoader: {
    modifyVars: mapToken
  },
});

.less

.div{
-  color: @layout-body-background;
-  background: @primary-color;
+  color: @colorPrimary;
+  background: @colorBgBase;
}

[sanheart]

umi项目启动还是报less错误
请您帮我看下怎么解决 @chenshuai2144

兄弟，找了半天解决了。原来是没安装less-loader 相关链接： https://webpack.docschina.org/loaders/less-loader/ https://blog.csdn.net/fifteen718/article/details/85704899 查看antd样式变量名: https://ant.design/docs/react/customize-theme-cn#seedtoken

相关代码 config.ts

import { theme } from 'antd';
const { defaultAlgorithm, defaultSeed } = theme;
const mapToken = defaultAlgorithm(defaultSeed);
export default defineConfig({
 lessLoader: {
    modifyVars: mapToken
  },
});

.less

.div{
-  color: @layout-body-background;
-  background: @primary-color;
+  color: @colorPrimary;
+  background: @colorBgBase;
}

您好。那么如何修改 @colorPrimary 的颜色呢

[ByYogi]

您好。那么如何修改 @colorPrimary 的颜色呢

你好，在umi中的配置文件中用下面配置

import { theme } from 'antd';

const { defaultAlgorithm, defaultSeed } = theme;
defaultSeed.colorPrimary = "red"; //这里修改自定义静态css变量
const mapToken = defaultAlgorithm(defaultSeed);

export default defineConfig({
  //配置这个属性需要安装  less-loader 插件
  //npm install less less-loader --save-dev
  lessLoader: {
    modifyVars: mapToken
  },
})

[wzlwangzhilin]

这个问题解决了吗？

[hjane]

但是我感觉这个方案想要实现动态换肤还是不行
没办法同步项目中动态改变的colorPrimary值和主题 light和dark值。

[xrkffgg]

顶一个

[afc163]

移除 babel-plugin-import 应该算一项。

[chenshuai2144]

umi 的插件现在有配置，你是希望默认配置吗

[afc163]

我希望后续默认关掉这个。

[chenshuai2144]

umi@3 可以先判断是antd@5 就关闭掉。
默认关最好等几个月

[Chastrlove]

1.next.js 引入直接antd 报错

import { ConfigProvider } from "antd";

2.ssr 下无法引入

import zhCN from "antd/es/locale/zh_CN";

都是一些服务端遇到的问题(⊙o⊙)…

[chunsch]

可以跟进这个 PR：feat: support for UMD bundles to be used on the ssr by chunsch · Pull Request #257 · ant-design/antd-tools · GitHub : D

[chenshuai2144]

message.warn 的兼容

/**
 * 兼容antd@4 和 antd@5 的warning
 * @param messageStr
 */
const warning = (messageStr: React.ReactNode) => {
  // @ts-ignore
  return (message.warn || message.warning)(messageStr);
};

[chenshuai2144]

dayjs 升级事项

- import moment from 'moment';
+ import dayjs from 'dayjs';

isMoment -> isDayjs

- moment.isMoment(text);
+ dayjs.isDayjs(text);

fromNow

- import moment from 'moment';
- moment(text).fromNow()

+ import dayjs from 'dayjs';
+ import relativeTime from 'dayjs/plugin/relativeTime';
+ dayjs.extend(relativeTime);
+ dayjs(text).fromNow()

[chenshuai2144]

PageHeader

antd 删除了PageHeader，可以从 procomponents 中获取

- import type  { PageHeaderProps } from 'antd';
- import { PageHeader } from 'antd';

+ import type { PageHeaderProps } from '@ant-design/pro-components';
+ import { PageHeader } from '@ant-design/pro-components';

[kaoding]

希望可以看到antd v5的官网，看一看v5到底长什么样子，怎么升级和使用它。

[AnteeHub]

同意，希望能够看到一个预览版本的官网。

[ratelgogo]

希望尽快出文档

[tamaka365]

应该是这个吧

[jk4235]

哪里能看到antd v5的 changeLog 和 roadMap 呢

[TinsFox]

#34087

[chinyifei]

其他组件中能不能加一个**“伸缩框 ResizeBox”**组件

[afc163]

你说的是 https://github.com/tomkp/react-split-pane ？

[alienzhangyw]

你说的是 https://github.com/tomkp/react-split-pane ？

就类似这个吧https://x6.antv.vision/zh/docs/api/ui/splitbox
配合AutoScrollBox使用

[chinyifei]

我最终选择了这个库 re-resizable

[F-happy]

5.0.0-alpha.2 版本的 Popover 组件 overlayInnerStyle 属性设置了没有效果额

[zhenzhenChange]

样式变量（CssVar/LessVar/Token）可以在文档中的API栏增加一个分栏展示么，每次需要修改的时候去查，都得全局搜主题文件里的变量，参考 Vant。

[matheusvalezin]

Updated figma components for Ant design 5? Any news about it?

[jaybowang]

Yes! We need v5 in Figma!

[hexiaomin496]

https://ant.design/docs/react/migration-v5-cn
我们使用的umi4+pro components v2.3.34，已经按照文档的升级步骤，在UMI4的config.ts中移除了babel。
我们也使用了less，但文档中提供的是在webpack config 配置进行迁移，如何在UMI4进行兼容less？

也尝试了将文档中的建议迁移less的方法，配置到UMI4的config.ts中的less loader方法里
但是在执行 pnpm start 命令时报错，并提示：cannot use import statement outside a module

我的配置方法如下：

是否有在UMI4中使用antd V5的文档？我们已经按照迁移文档要求迁移到antd V4.24.4

[liuxi0811]

后来解决了么

[n0tKnow]

请问官网这个demo有代码示例吗？感觉这个脚手架很好用

[yoyo837]

在仓库源码里面

[GirlGlitter]

successfully upgraded👍

[liuxi0811]

How to do it

[GirlGlitter]

How to do it

https://ant.design/docs/react/migration-v5

[yangda666]

升级antd 5 在 umi中使配置 AntdMomentWebpackPlugin 后启动不起来了
const AntdMomentWebpackPlugin = require('@ant-design/moment-webpack-plugin');
chainWebpack: (memo) => {
memo.plugin('antd-moment-webpack-plugin')
.use(AntdMomentWebpackPlugin)
}

[yangda666]

请问这样配的有问题吗，为什么跑不起来呢

[Wxh16144]

能否提供一个稳定复现的最小 repo？

[yangda666]

https://github.com/yangda666/antd-umi3.git 我连夜给你弄了一个

[iAmber]

版本 5.1.2 使用watermark组件报错

提示 /node_modules/antd/es/watermark/style/index

Does the file exist?

[Wxh16144]

请检查项目中是否使用了 babel-plugin-import 插件，5.x 已经不需要了。

link: https://ant.design/docs/react/migration-v-5#remove-babel-plugin-import

[iAmber]

并没有使用 babel-plugin-import

[iAmber]

供参考，react + vite, 项目使用了 vite-plugin-style-import，移除即可

[popmanhe]

antd v5 SSR Theme的问题。

安装示例里面：

  const cache = createCache();

  const html = renderToString(
    <StyleProvider cache={cache}>
      <MyApp />
    </StyleProvider>,
  );


  // Grab style from cache
  const styleText = extractStyle(cache);

styleText 是空的。 我觉得是因为我的组件里面没有用cssinjs的方式。
但是如何获得antd里面的样式呢？
下图是客户端产生的样式。

下图是服务器端产生的

服务器端却无法获得同样的样式。 这样服务器产生的页面就没有样式，而且会导致整个页面重新刷新一次。

[egene-huang]

请大佬们帮忙看一下这个问题： https://github.com/ant-design/ant-design/discussions/40442
一直没有找到解决的办法，请救救这个孩子~

[yaojing-pan]

请问v5用定制主题怎么全局改button的font-weight，我没有找到对应的属性

[zhangqhzz]

我更新V5后，发现原来的一些样式有变化，影响到我的应用，如V4中有global.less 对HTML的P，h1,h2……h6元素有 margin-top: 0;这个相当于默认的，但在V5没有了，global.less中还有一些东西也可能类似。

[yoyo837]

试试antd/dist/reset.css

[zhangqhzz]

OK，谢谢

[glin7976]

你好，请问你解决了吗？我是了yoyo的方法不work

[zhangqhzz]

App包裹组件
如何使用部分（不是代码演示）， 能否也加入javascript，现在只有typescript的代码
https://ant.design/components/app-cn

[Wxh16144]

应该没有这方面计划，现在所有代码片段优先使用 TypeScript。

[afc163]

@PeachScript dumi 可以默认来个代码切换按钮？

[PeachScript]

自动切换比较难做，dumi 1 最初有对代码演示提供 ts 自动转 js 作转换，但构建时间会变长（compile + prettier）、产物尺寸也会变大（多一份 js），所以后面就去掉了

dumi 2 有计划支持 tab 形式，md 里一次性写两份代码块，dumi 再整合展示

[afc163]

可以做前端转换

[zhangqhzz]

希望在组件设计时，兼考虑主从、主从从等在一个画面操作的例子，另外定制主题能否有表单上预设的几种，如表头色，内容，奇偶行，选中色等。

[zhangqhzz]

pro的都比较大，需要滚动看另一项内容，否则一个画面上看表单行数就很少

[xiaogonggong-w]

按照升级文档来的,less,less-loader已经安装了,项目中并没有引入这个less文件,又重新删除了node_moudle包和.umi还是不行

[Jiangyidan]

解决了吗

[dx-pioneer]

这样配置一下，清除一下cache，重装node_modules和.umi，就可以了，我是这样做的

[jyw2001]

二维码功能是已经没了么 还是说我依赖没有安装好？

[kiner-tang]

装的是什么版本的antd?qrcode是5.1.0之后才支持的哟

[sktony6260]

CompatibleConsumer.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'Consumer')

按照升级提示从v4升级到v5，浏览器里面有报错

错误文件是

webpack:///node_modules/@ant-design/compatible/es/CompatibleConsumer.js?1b55

错误代码

import { ConfigProvider } from 'antd';
var MergedConfigConsumer = ConfigProvider.ConfigContext.Consumer;
export default MergedConfigConsumer;

要怎么解决啊 @chenshuai2144

[hjane]

这是来自QQ邮箱的自动回复邮件。您好，您的邮件已经收到，我会在一周内尽快给您回复！

[hjane]

这是来自QQ邮箱的自动回复邮件。您好，您的邮件已经收到，我会在一周内尽快给您回复！