Browse Source
docs: Update v5 res & adjust cssinjs doc (#38799 )
* docs: update res
* docs: more
* docs: update
* Update docs/react/customize-theme.zh-CN.md
Co-authored-by: afc163 <afc163@gmail.com>
* docs: more mig
Co-authored-by: afc163 <afc163@gmail.com>
pull/38819/head
二货爱吃白萝卜
2 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with
53 additions and
24 deletions
docs/react/customize-theme.en-US.md
docs/react/customize-theme.zh-CN.md
docs/react/migration-v5.en-US.md
docs/react/migration-v5.zh-CN.md
docs/resources.en-US.md
docs/resources.zh-CN.md
@ -217,7 +217,7 @@ const theme = {
### Compatible adjustment
Ant Design default using CSS-in-JS with `:where` Selector to reduce priority. If you want to support old browser, you can use `@ant-design/cssinjs` to adjust this behavior (Please note keep version align with antd):
Ant Design default using CSS-in-JS with `:where` Selector to reduce priority to avoid user additional adjust style cost when updating to v5 . If you want to support old browser, you can use `@ant-design/cssinjs` to adjust this behavior (Please note keep version align with antd):
```tsx
import React from 'react';
@ -239,6 +239,8 @@ It will turn `:where` to class selector:
}
```
Note: After turning off the `:where` downgrade, you may need to manually adjust the priority of some styles.
### Server Side Render (SSR)
Use `@ant-design/cssinjs` to extract style:
@ -217,7 +217,7 @@ const theme = {
### 兼容性调整
Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级。在某些场景下你如果需要支持的旧版游 览器,你可以使用 `@ant-design/cssinjs` 取消默认的降权操作(请注意版本保持与 antd 一致):
Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级,以减少用户升级 v5 时额外调整自定义样式成本 。在某些场景下你如果需要支持的旧版浏 览器,你可以使用 `@ant-design/cssinjs` 取消默认的降权操作(请注意版本保持与 antd 一致):
```tsx
import React from 'react';
@ -239,6 +239,8 @@ export default () => (
}
```
注意:关闭 `:where` 降权后,你可能需要手动调整一些样式的优先级。
### 服务端渲染
使用 `@ant-design/cssinjs` 将所需样式抽离:
@ -185,6 +185,27 @@ const v4Token = convertLegacyToken(mapToken);
}
```
### Remove babel-plugin-import
Remove `babel-plugin-import` from package.json and modify `.babelrc` :
```diff
"plugins": [
- ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "antd"],
]
```
Umi user can disable by config:
```diff
// config/config.ts or .umirc
export default {
antd: {
- import: true,
},
};
```
## Encounter problems
If you encounter problems during the upgrade, please go to [GitHub issues ](https://new-issue.ant.design/ ) for feedback. We will respond and improve this document as soon as possible.
@ -27,16 +27,7 @@ title: 从 v4 到 v5
- 移除 css variables 以及在此之上构筑的动态主题方案。
- 移除 `lib` 产物,只提供 `dist` 和 `es` 产物,原本的 `antd/es/locale` 目录也已经移除,语言包可到 `antd/locale` 目录下寻找。
- 内置的时间库使用 Dayjs 替代 Moment.js,具体请查看 [使用自定义日期库 ](/docs/react/use-custom-date-library-cn/ )。
- 不再支持 `babel-plugin-import` ,CSS-in-JS 本身具有按需加载的能力,不再需要插件支持。Umi 用户可以移除相关配置。
```diff
// config/config.ts
export default {
antd: {
- import: true,
},
};
```
- 不再支持 `babel-plugin-import` ,CSS-in-JS 本身具有按需加载的能力,不再需要插件支持。
### 兼容性调整
@ -164,6 +155,8 @@ title: 从 v4 到 v5
npm install --save antd@5.x
```
### less 迁移
如果你使用到了 antd 的 less 变量,通过兼容包将 v5 变量转译成 v4 版本,并通过 less-loader 注入:
```jsx
@ -186,6 +179,27 @@ const v4Token = convertLegacyToken(mapToken);
}
```
### 移除 babel-plugin-import
从 package.json 中移除 `babel-plugin-import` ,并从 `.babelrc` 移除该插件:
```diff
"plugins": [
- ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "antd"],
]
```
Umi 用户可以在配置文件中关闭:
```diff
// config/config.ts or .umirc
export default {
antd: {
- import: true,
},
};
```
## 遇到问题
如果您在升级过程中遇到了问题,请到 [GitHub issues ](https://new-issue.ant.design/ ) 进行反馈。我们会尽快响应和相应改进这篇文档。
@ -15,12 +15,7 @@ Please find below some of the design resources and tools about Ant Design that w
- Sketch Symbols
- https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg
- Sketch Symbols for Desktop
- https://gw.alipayobjects.com/os/bmw-prod/a5ff1d86-44cd-4b86-92f8-daab59cba5b7.sketch
- Official
- Sketch Symbols (Dark)
- https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg
- Sketch Symbols for Desktop with dark theme
- https://gw.alipayobjects.com/os/bmw-prod/6b670a1c-26e3-4379-9c86-7a2b95e170e5.sketch
- https://gw.alipayobjects.com/os/hitu-asset/5217de80-7a3e-413f-809e-20ecede4f3f3/hitu-1669000735416-5000001.sketch
- Official
- Mobile Components
- https://gw.alipayobjects.com/zos/basement_prod/c0c3852c-d245-4330-886b-cb02ef49eb6d.svg
@ -15,12 +15,7 @@ toc: false
- Sketch 组件包
- https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg
- 桌面组件 Sketch 模板包
- https://gw.alipayobjects.com/os/bmw-prod/82c08c51-9993-4568-90c1-249c8301c0af.sketch
- 官方
- Sketch 组件包 (暗色)
- https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg
- 桌面组件 Sketch 模板包,内含暗色版本的 antd 组件
- https://gw.alipayobjects.com/os/bmw-prod/f002145c-33d9-408e-ba75-a1a68896dfa3.sketch
- https://gw.alipayobjects.com/os/hitu-asset/5217de80-7a3e-413f-809e-20ecede4f3f3/hitu-1669000735416-5000001.sketch
- 官方
- Mobile Components
- https://gw.alipayobjects.com/zos/basement_prod/c0c3852c-d245-4330-886b-cb02ef49eb6d.svg