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>
This commit is contained in:
二货爱吃白萝卜 2022-11-21 22:33:47 +08:00 committed by GitHub
parent c3fa08c896
commit b87b956e4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 53 additions and 24 deletions

View File

@ -217,7 +217,7 @@ const theme = {
### Compatible adjustment ### 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 ```tsx
import React from 'react'; 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) ### Server Side Render (SSR)
Use `@ant-design/cssinjs` to extract style: Use `@ant-design/cssinjs` to extract style:

View File

@ -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 ```tsx
import React from 'react'; import React from 'react';
@ -239,6 +239,8 @@ export default () => (
} }
``` ```
注意:关闭 `:where` 降权后,你可能需要手动调整一些样式的优先级。
### 服务端渲染 ### 服务端渲染
使用 `@ant-design/cssinjs` 将所需样式抽离: 使用 `@ant-design/cssinjs` 将所需样式抽离:

View File

@ -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 ## 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. 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.

View File

@ -27,16 +27,7 @@ title: 从 v4 到 v5
- 移除 css variables 以及在此之上构筑的动态主题方案。 - 移除 css variables 以及在此之上构筑的动态主题方案。
- 移除 `lib` 产物,只提供 `dist``es` 产物,原本的 `antd/es/locale` 目录也已经移除,语言包可到 `antd/locale` 目录下寻找。 - 移除 `lib` 产物,只提供 `dist``es` 产物,原本的 `antd/es/locale` 目录也已经移除,语言包可到 `antd/locale` 目录下寻找。
- 内置的时间库使用 Dayjs 替代 Moment.js具体请查看 [使用自定义日期库](/docs/react/use-custom-date-library-cn/)。 - 内置的时间库使用 Dayjs 替代 Moment.js具体请查看 [使用自定义日期库](/docs/react/use-custom-date-library-cn/)。
- 不再支持 `babel-plugin-import`CSS-in-JS 本身具有按需加载的能力不再需要插件支持。Umi 用户可以移除相关配置。 - 不再支持 `babel-plugin-import`CSS-in-JS 本身具有按需加载的能力,不再需要插件支持。
```diff
// config/config.ts
export default {
antd: {
- import: true,
},
};
```
### 兼容性调整 ### 兼容性调整
@ -164,6 +155,8 @@ title: 从 v4 到 v5
npm install --save antd@5.x npm install --save antd@5.x
``` ```
### less 迁移
如果你使用到了 antd 的 less 变量,通过兼容包将 v5 变量转译成 v4 版本,并通过 less-loader 注入: 如果你使用到了 antd 的 less 变量,通过兼容包将 v5 变量转译成 v4 版本,并通过 less-loader 注入:
```jsx ```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/) 进行反馈。我们会尽快响应和相应改进这篇文档。 如果您在升级过程中遇到了问题,请到 [GitHub issues](https://new-issue.ant.design/) 进行反馈。我们会尽快响应和相应改进这篇文档。

View File

@ -15,12 +15,7 @@ Please find below some of the design resources and tools about Ant Design that w
- Sketch Symbols - Sketch Symbols
- https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg - https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg
- Sketch Symbols for Desktop - Sketch Symbols for Desktop
- https://gw.alipayobjects.com/os/bmw-prod/a5ff1d86-44cd-4b86-92f8-daab59cba5b7.sketch - https://gw.alipayobjects.com/os/hitu-asset/5217de80-7a3e-413f-809e-20ecede4f3f3/hitu-1669000735416-5000001.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
- Official - Official
- Mobile Components - Mobile Components
- https://gw.alipayobjects.com/zos/basement_prod/c0c3852c-d245-4330-886b-cb02ef49eb6d.svg - https://gw.alipayobjects.com/zos/basement_prod/c0c3852c-d245-4330-886b-cb02ef49eb6d.svg

View File

@ -15,12 +15,7 @@ toc: false
- Sketch 组件包 - Sketch 组件包
- https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg - https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg
- 桌面组件 Sketch 模板包 - 桌面组件 Sketch 模板包
- https://gw.alipayobjects.com/os/bmw-prod/82c08c51-9993-4568-90c1-249c8301c0af.sketch - https://gw.alipayobjects.com/os/hitu-asset/5217de80-7a3e-413f-809e-20ecede4f3f3/hitu-1669000735416-5000001.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
- 官方 - 官方
- Mobile Components - Mobile Components
- https://gw.alipayobjects.com/zos/basement_prod/c0c3852c-d245-4330-886b-cb02ef49eb6d.svg - https://gw.alipayobjects.com/zos/basement_prod/c0c3852c-d245-4330-886b-cb02ef49eb6d.svg