mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 23:00:20 +08:00
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:
parent
c3fa08c896
commit
b87b956e4b
@ -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:
|
||||||
|
@ -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` 将所需样式抽离:
|
||||||
|
@ -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.
|
||||||
|
@ -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/) 进行反馈。我们会尽快响应和相应改进这篇文档。
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user