diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index 62cef852b4..fabd5d5d1a 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -77,3 +77,9 @@ Please ensure that the child node of `Dropdown` accepts `onMouseEnter`, `onMouse
## Design Token
+
+## FAQ
+
+### How to prevent Dropdown from being squeezed when it exceeds the screen horizontally?
+
+You can use `width: max-content` style to handle this. ref [#43025](https://github.com/ant-design/ant-design/issues/43025#issuecomment-1594394135).
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index 00073ec217..89c1bbc15b 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -81,3 +81,9 @@ demo:
## Design Token
+
+## FAQ
+
+### Dropdown 在水平方向超出屏幕时会被挤压改怎么办?
+
+你可以通过 `width: max-content` 来解决这个问题,参考 [#43025](https://github.com/ant-design/ant-design/issues/43025#issuecomment-1594394135)。
diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md
index df32ed05e8..a8f2349f6b 100644
--- a/docs/react/customize-theme.en-US.md
+++ b/docs/react/customize-theme.en-US.md
@@ -96,6 +96,13 @@ In this way, we changed the primary color of Radio to Motion
+
## Other Ways to Use Dynamic Themes
### Switch Themes Dynamically
@@ -560,12 +567,11 @@ export default class MyDocument extends Document {
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
- enhanceApp: (App) => (props) =>
- (
-
-
-
- ),
+ enhanceApp: (App) => (props) => (
+
+
+
+ ),
});
const initialProps = await Document.getInitialProps(ctx);
diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md
index eea3c44469..7104d6e9a7 100644
--- a/docs/react/customize-theme.zh-CN.md
+++ b/docs/react/customize-theme.zh-CN.md
@@ -96,6 +96,13 @@ export default App;
> 注意:`ConfigProvider` 对 `message.xxx`、`Modal.xxx`、`notification.xxx` 等静态方法不会生效,原因是在这些方法中,antd 会通过 `ReactDOM.render` 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同,因而无法获取 context 信息。当你需要 context 信息(例如 ConfigProvider 配置的内容)时,可以通过 `Modal.useModal` 方法会返回 modal 实体以及 contextHolder 节点。将其插入到你需要获取 context 位置即可,也可通过 [App 包裹组件](/components/app-cn) 简化 useModal 等方法需要手动植入 contextHolder 的问题。
+### 禁用动画
+
+antd 默认内置了一些组件交互动效让企业级页面更加富有细节,在一些极端场景可能会影响页面交互性能,如需关闭动画可以使用下面的方式:
+
+
+动画控制
+
## 动态主题的其他使用方式
### 动态切换
@@ -556,12 +563,11 @@ export default class MyDocument extends Document {
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
- enhanceApp: (App) => (props) =>
- (
-
-
-
- ),
+ enhanceApp: (App) => (props) => (
+
+
+
+ ),
});
const initialProps = await Document.getInitialProps(ctx);
diff --git a/docs/react/demo/motion.md b/docs/react/demo/motion.md
new file mode 100644
index 0000000000..53383e0cb4
--- /dev/null
+++ b/docs/react/demo/motion.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过 `token` 进行动画效果配置。
+
+## en-US
+
+Config animation effect by `token`.
diff --git a/docs/react/demo/motion.tsx b/docs/react/demo/motion.tsx
new file mode 100644
index 0000000000..888fb37152
--- /dev/null
+++ b/docs/react/demo/motion.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Switch, ConfigProvider, Space, Checkbox, Radio, Row, Col } from 'antd';
+
+export default () => {
+ const [checked, setChecked] = React.useState(false);
+
+ React.useEffect(() => {
+ const id = setInterval(() => {
+ setChecked((prev) => !prev);
+ }, 500);
+
+ return () => {
+ clearInterval(id);
+ };
+ }, []);
+
+ const nodes = (
+
+ Checkbox
+ Radio
+
+
+ );
+
+ return (
+
+ {nodes}
+
+
+
+ {nodes}
+
+
+
+ );
+};