mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +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:
二货爱吃白萝卜
GitHub
parent
c3fa08c896
commit
b87b956e4b
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user