From 94541eda67eec294dd6b1cf170f31b42a1017946 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sat, 15 Jul 2023 16:03:53 +0800 Subject: [PATCH 01/34] fix: add NODE_ENV for Icon warning (#43574) --- components/icon/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/icon/index.ts b/components/icon/index.ts index 7cc36928c5..d985d56650 100755 --- a/components/icon/index.ts +++ b/components/icon/index.ts @@ -1,7 +1,9 @@ import warning from '../_util/warning'; const Icon: React.FC = () => { - warning(false, 'Icon', 'Empty Icon'); + if (process.env.NODE_ENV !== 'production') { + warning(false, 'Icon', 'Empty Icon'); + } return null; }; From 99c4c381a98420d127f107438e2361db8acad481 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Sat, 15 Jul 2023 20:31:16 +0800 Subject: [PATCH 02/34] docs: remove document about allowClear in slider because the api does not exist (#43580) --- components/slider/index.zh-CN.md | 1 - 1 file changed, 1 deletion(-) diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md index 7d5ec37f90..1036fa393a 100644 --- a/components/slider/index.zh-CN.md +++ b/components/slider/index.zh-CN.md @@ -35,7 +35,6 @@ demo: | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | autoFocus | 自动获取焦点 | boolean | false | | -| allowClear | 支持清除, 单选模式有效 | boolean | false | | | defaultValue | 设置初始取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | 0 \| \[0, 0] | | | disabled | 值为 true 时，滑块为禁用状态 | boolean | false | | | keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ | From a7400d6e34ed209383f240536793aa3d498c5c3a Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Sat, 15 Jul 2023 20:41:04 +0800 Subject: [PATCH 03/34] type: optimize type auto-complete mode (#43581) --- components/auto-complete/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index a4a618e223..40b060027b 100755 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -16,6 +16,7 @@ import type { DefaultOptionType, InternalSelectProps, RefSelectProps, + SelectProps, } from '../select'; import Select from '../select'; @@ -146,7 +147,7 @@ const AutoComplete: React.ForwardRefRenderFunction Date: Sat, 15 Jul 2023 20:55:44 +0800 Subject: [PATCH 04/34] chore: add icons 'Dingtalk' and 'WhatsApp' to the category 'logo' (#43577) Co-authored-by: afc163 --- .dumi/theme/builtins/IconSearch/fields.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.dumi/theme/builtins/IconSearch/fields.ts b/.dumi/theme/builtins/IconSearch/fields.ts index e86cd40639..f171a94065 100644 --- a/.dumi/theme/builtins/IconSearch/fields.ts +++ b/.dumi/theme/builtins/IconSearch/fields.ts @@ -165,9 +165,11 @@ const logo = [ 'Weibo', 'Twitter', 'Wechat', + 'WhatsApp', 'Youtube', 'AlipayCircle', 'Taobao', + 'Dingtalk', 'Skype', 'Qq', 'MediumWorkmark', From ca35f2f891b534ff1732c4451339fa58510317a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Sun, 16 Jul 2023 12:13:22 +0800 Subject: [PATCH 05/34] docs: update docs about app router in use-with-next (#43579) * docs: update docs * docs: update docs * feat: optimize code * docs: update docs * docs: update docs --- docs/react/use-with-next.en-US.md | 112 ++++++++++++++++++++++++++++++ docs/react/use-with-next.zh-CN.md | 112 ++++++++++++++++++++++++++++++ 2 files changed, 224 insertions(+) diff --git a/docs/react/use-with-next.en-US.md b/docs/react/use-with-next.en-US.md index 5a8bfa2b04..1714c33e29 100644 --- a/docs/react/use-with-next.en-US.md +++ b/docs/react/use-with-next.en-US.md @@ -48,3 +48,115 @@ export default Home; OK, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `Next.js` at its [User Guide](https://nextjs.org/). We are successfully running antd components now, go build your own application! + +## Using Next.js App Router + +If you are using the App Router in Next.js and using antd as your component library, to make the antd component library work better in your Next.js application and provide a better user experience, you can try using the following method to extract and inject antd's first-screen styles into HTML to avoid page flicker. + +1. Install `@ant-design/cssinjs` + + + +2. Create `lib/AntdRegistry.tsx` + +```tsx +'use client'; + +import React from 'react'; +import { useServerInsertedHTML } from 'next/navigation'; +import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; + +export default function StyledComponentsRegistry({ children }: { children: React.ReactNode }) { + const cache = createCache(); + + useServerInsertedHTML(() => ( + + )); + + return {children}; +} +``` + +3. Use it in `app/layout.tsx` + +```tsx +import StyledComponentsRegistry from '../lib/AntdRegistry'; +import './globals.css'; +import { Inter } from 'next/font/google'; + +const inter = Inter({ subsets: ['latin'] }); + +export const metadata = { + title: 'Create Next App', + description: 'Generated by create next app', +}; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + + {children} + + + ); +} +``` + +4. Customize theme in `theme/*.tsx` + +```tsx +'use client'; + +// theme/index.tsx +import React from 'react'; +import { ConfigProvider } from 'antd'; + +const withTheme = (node: JSX.Element) => ( + + {/* nesting */} + + {node} + + +); + +export default withTheme; +``` + +5. Use in page + +```tsx +'use client'; + +import React from 'react'; +import { Button } from 'antd'; +import withTheme from '../../theme'; + +const Home = function Home() { + return ( +
+ +
+ ); +}; + +const HomePage = () => { + return withTheme(); +}; + +export default HomePage; +``` + +For more detailed information, please refer to [with-nextjs-app-router-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-app-router-inline-style)。 diff --git a/docs/react/use-with-next.zh-CN.md b/docs/react/use-with-next.zh-CN.md index cd8f8479a4..6eaa0fbbe5 100644 --- a/docs/react/use-with-next.zh-CN.md +++ b/docs/react/use-with-next.zh-CN.md @@ -48,3 +48,115 @@ export default Home; 好了，现在你应该能看到页面上已经有了 `antd` 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 Next.js 的[官方文档](https://nextjs.org/)。 我们现在已经把 antd 组件成功运行起来了，开始开发你的应用吧！ + +## 使用 Next.js 的 App Router + +如果你在 Next.js 当中使用了 App Router, 并使用 antd 作为页面组件库，为了让 antd 组件库在你的 Next.js 应用中能够更好的工作，提供更好的用户体验，你可以尝试使用下面的方式将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况。 + +1. 安装 `@ant-design/cssinjs` + + + +2. 创建 `lib/AntdRegistry.tsx` + +```tsx +'use client'; + +import React from 'react'; +import { useServerInsertedHTML } from 'next/navigation'; +import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; + +export default function StyledComponentsRegistry({ children }: { children: React.ReactNode }) { + const cache = createCache(); + + useServerInsertedHTML(() => ( + + )); + + return {children}; +} +``` + +3. 在 `app/layout.tsx` 中使用 + +```tsx +import StyledComponentsRegistry from '../lib/AntdRegistry'; +import './globals.css'; +import { Inter } from 'next/font/google'; + +const inter = Inter({ subsets: ['latin'] }); + +export const metadata = { + title: 'Create Next App', + description: 'Generated by create next app', +}; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + + {children} + + + ); +} +``` + +4. 在 `theme/*.tsx` 中自定义主题 + +```tsx +'use client'; + +// theme/index.tsx +import React from 'react'; +import { ConfigProvider } from 'antd'; + +const withTheme = (node: JSX.Element) => ( + + {/* nesting */} + + {node} + + +); + +export default withTheme; +``` + +5. 在页面中使用 + +```tsx +'use client'; + +import React from 'react'; +import { Button } from 'antd'; +import withTheme from '../../theme'; + +const Home = function Home() { + return ( +
+ +
+ ); +}; + +const HomePage = () => { + return withTheme(); +}; + +export default HomePage; +``` + +更多详细的细节可以参考 [with-nextjs-app-router-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-app-router-inline-style)。 From 990a31cd84a63f092c36d8cf018d73ce4d6f3f0f Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sun, 16 Jul 2023 13:28:45 +0800 Subject: [PATCH 06/34] chore(deps): update dependency eslint-plugin-unicorn to v48 (#43585) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d36523acde..0446e444a7 100644 --- a/package.json +++ b/package.json @@ -228,7 +228,7 @@ "eslint-plugin-markdown": "^3.0.0", "eslint-plugin-react": "^7.31.8", "eslint-plugin-react-hooks": "^4.1.2", - "eslint-plugin-unicorn": "^47.0.0", + "eslint-plugin-unicorn": "^48.0.0", "fast-glob": "^3.2.11", "fetch-jsonp": "^1.1.3", "fs-extra": "^11.0.0", From cb45e3db8abf029ec161472f4d4ff030b084e2d1 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sun, 16 Jul 2023 13:29:28 +0800 Subject: [PATCH 07/34] chore(deps): update dependency @argos-ci/core to ^0.9.0 (#43584) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0446e444a7..cfbb733df3 100644 --- a/package.json +++ b/package.json @@ -160,7 +160,7 @@ "devDependencies": { "@ant-design/tools": "^17.0.0", "@antv/g6": "^4.8.13", - "@argos-ci/core": "^0.8.0", + "@argos-ci/core": "^0.9.0", "@babel/eslint-plugin": "^7.19.1", "@dnd-kit/core": "^6.0.7", "@dnd-kit/modifiers": "^6.0.1", From fc83371a005a55e7dcfc5dac9c313fc61943119d Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Sun, 16 Jul 2023 18:30:15 +0800 Subject: [PATCH 08/34] type(button): add style type React.CSSProperties (#43588) --- components/button/button.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/components/button/button.tsx b/components/button/button.tsx index 868b60186e..4ec49535f3 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -237,10 +237,13 @@ const InternalButton: React.ForwardRefRenderFunction< button?.className, ); - const fullStyle = { ...button?.style, ...customStyle }; + const fullStyle: React.CSSProperties = { ...button?.style, ...customStyle }; const iconClasses = classNames(customClassNames?.icon, button?.classNames?.icon); - const iconStyle = { ...(styles?.icon || {}), ...(button?.styles?.icon || {}) }; + const iconStyle: React.CSSProperties = { + ...(styles?.icon || {}), + ...(button?.styles?.icon || {}), + }; const iconNode = icon && !innerLoading ? ( From 1847fd6e24b15dc288e4b43ce14861409d5d026d Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 16 Jul 2023 23:43:48 +0800 Subject: [PATCH 09/34] site: improve docs use-with-next (#43590) --- docs/react/use-with-next.en-US.md | 90 ++++++++++++------------------- docs/react/use-with-next.zh-CN.md | 90 ++++++++++++------------------- 2 files changed, 70 insertions(+), 110 deletions(-) diff --git a/docs/react/use-with-next.en-US.md b/docs/react/use-with-next.en-US.md index 1714c33e29..d2b7935fd3 100644 --- a/docs/react/use-with-next.en-US.md +++ b/docs/react/use-with-next.en-US.md @@ -62,27 +62,28 @@ If you are using the App Router in Next.js and using antd as your component libr ```tsx 'use client'; -import React from 'react'; -import { useServerInsertedHTML } from 'next/navigation'; import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; +import { useServerInsertedHTML } from 'next/navigation'; +import React from 'react'; -export default function StyledComponentsRegistry({ children }: { children: React.ReactNode }) { +const StyledComponentsRegistry = ({ children }: { children: React.ReactNode }) => { const cache = createCache(); - useServerInsertedHTML(() => ( - + + -### `scrollToFirstError` and `scrollToField` not working on custom form control? +### `scrollToFirstError` and `scrollToField` not working? + +1. use custom form control See similar issues: [#28370](https://github.com/ant-design/ant-design/issues/28370) [#27994](https://github.com/ant-design/ant-design/issues/27994) `scrollToFirstError` and `scrollToField` deps on `id` attribute passed to form control, please make sure that it hasn't been ignored in your custom form control. Check [codesandbox](https://codesandbox.io/s/antd-reproduction-template-forked-25nul?file=/index.js) for solution. +2. multiple forms on same page + +If there are multiple forms on the page, and there are duplicate same `name` form item, the form scroll probably may find the form item with the same name in another form. You need to set a different `name` for the `Form` component to distinguish it. + ### Continue, why not use `ref` to bind element? Form can not get real DOM node when customize component not support `ref`. It will get warning in React Strict Mode if wrap with Class Component and call `findDOMNode`. So we use `id` to locate element. diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 362274a2be..296db83299 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -591,12 +591,18 @@ React 中异步更新会导致受控组件交互行为异常。当用户交互 } -### 自定义表单控件 `scrollToFirstError` 和 `scrollToField` 失效？ +### `scrollToFirstError` 和 `scrollToField` 失效？ + +1. 使用了自定义表单控件 类似问题：[#28370](https://github.com/ant-design/ant-design/issues/28370) [#27994](https://github.com/ant-design/ant-design/issues/27994) 滚动依赖于表单控件元素上绑定的 `id` 字段，如果自定义控件没有将 `id` 赋到正确的元素上，这个功能将失效。你可以参考这个 [codesandbox](https://codesandbox.io/s/antd-reproduction-template-forked-25nul?file=/index.js)。 +2. 页面内有多个表单 + +页面内如果有多个表单，且存在表单项 `name` 重复，表单滚动定位可能会查找到另一个表单的同名表单项上。需要给表单 `Form` 组件设置不同的 `name` 以区分。 + ### 继上，为何不通过 `ref` 绑定元素？ 当自定义组件不支持 `ref` 时，Form 无法获取子元素真实 DOM 节点，而通过包裹 Class Component 调用 `findDOMNode` 会在 React Strict Mode 下触发警告。因而我们使用 id 来进行元素定位。 From 2285b5e87ed2ce803eaf339ae42d2a6c947a7ad1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 19 Jul 2023 11:49:57 +0800 Subject: [PATCH 26/34] docs: update changelog and add timeout for test case (#43642) --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 1 + components/locale/__tests__/config.test.tsx | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index b3f2707db3..bd26cb9a17 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -22,6 +22,7 @@ timeline: true - 💄 Migrate Component Token of Menu from 4.x less variables. [#43576](https://github.com/ant-design/ant-design/pull/43576) - 🐞 Fix QRCode throws `Can't resolve 'antd/lib/qr-code'` in Next.js 13. [#43572](https://github.com/ant-design/ant-design/issues/43572) - 🐞 Fix that antd components usage in Next.js App Router, check the [documentation](/docs/react/use-with-next#using-nextjs-app-router). [#43573](https://github.com/ant-design/ant-design/pull/43573) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 Fix InputNumber Phantom dependency issue: `Cannot find module 'rc-component/mini-decimal'`. [#43635](https://github.com/ant-design/ant-design/pull/43635) - 🐞 Fix Checkbox both set `checked` and `indeterminate` prop will not show as `indeterminate` style. [#43626](https://github.com/ant-design/ant-design/pull/43626) - 🐞 Fix Form.Item set `label=""` will break the line align. [#43614](https://github.com/ant-design/ant-design/pull/43614) - 🐞 Fix notification `placement` not being respected when passed via App component. [#43522](https://github.com/ant-design/ant-design/pull/43522) [@Rajil1213](https://github.com/Rajil1213) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 200bd736f9..047f5b8cbd 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -22,6 +22,7 @@ timeline: true - 💄 补全 Menu 主题定制 token。[#43576](https://github.com/ant-design/ant-design/pull/43576) - 🐞 修复 QRCode 在 Next.js 13 中报错 `Can't resolve 'antd/lib/qr-code'` 的问题。[#43572](https://github.com/ant-design/ant-design/issues/43572) - 🐞 修复 antd 不支持在 Next.js App Router 中使用的问题，查看[使用文档](/docs/react/use-with-next#使用-nextjs-的-app-router)。[#43573](https://github.com/ant-design/ant-design/pull/43573) +- 🐞 修复 InputNumber 幽灵依赖报错 `Cannot find module 'rc-component/mini-decimal'`。[#43635](https://github.com/ant-design/ant-design/pull/43635) - 🐞 修复 App.useApp 方式调用 notification 组件时 `placement` 属性不生效的问题。[#43522](https://github.com/ant-design/ant-design/pull/43522) [@Rajil1213](https://github.com/Rajil1213) - 🐞 修复 Checkbox 同时配置 `checked` 和 `indeterminate` 时没有展示为 `indeterminate` 样式的问题。[#43626](https://github.com/ant-design/ant-design/pull/43626) - 🐞 修复 Form.Item 设置 `label=""` 时垂直方向对齐偏移的问题。[#43614](https://github.com/ant-design/ant-design/pull/43614) diff --git a/components/locale/__tests__/config.test.tsx b/components/locale/__tests__/config.test.tsx index 54f85fb363..22203b0fd1 100644 --- a/components/locale/__tests__/config.test.tsx +++ b/components/locale/__tests__/config.test.tsx @@ -53,5 +53,5 @@ describe('Locale Provider demo', () => { expect(document.body.querySelectorAll('.ant-btn-primary span')[0]?.textContent).toBe('确 定'); Modal.destroyAll(); jest.useRealTimers(); - }); + }, 500000); }); From 614228ae50251fb7fee9213adcafe3a2d052aca4 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 19 Jul 2023 11:50:50 +0800 Subject: [PATCH 27/34] docs: add suspense doc (#43643) --- docs/blog/suspense.en-US.md | 79 +++++++++++++++++++++++++++++++++++++ docs/blog/suspense.zh-CN.md | 79 +++++++++++++++++++++++++++++++++++++ 2 files changed, 158 insertions(+) diff --git a/docs/blog/suspense.en-US.md b/docs/blog/suspense.en-US.md index 26b9d96ce0..9b9b40caf1 100644 --- a/docs/blog/suspense.en-US.md +++ b/docs/blog/suspense.en-US.md @@ -177,6 +177,85 @@ useLayoutEffect(() => { Measure logic in `useLayoutEffect` is executed before injecting style, resulting in incorrect size information. It can also be predicted that this will have an impact on developers. So we have to compromise, and in React 17 version, it will be downgraded to the original `useMemo` insertion. +## New Problem under React 17 + +With the above solution, `useInsertionEffect` perfectly solve the rendering problem. But in React 17 and below versions, we still insert styles in the render phase, but we will increase the reference count in the effect phase. But this brings a new problem, let's look at a piece of code ([CodeSandbox](https://codesandbox.io/s/aged-cdn-qjxmpz?file=/src/App.tsx:23-886)): + +```tsx +import React from 'react'; + +const A = () => { + React.useMemo(() => { + console.log('A render'); + }, []); + + React.useEffect(() => { + console.log('A mounted'); + return () => { + console.log('A unmounted'); + }; + }, []); + + return
A
; +}; + +const B = () => { + React.useMemo(() => { + console.log('B render'); + }, []); + + React.useEffect(() => { + console.log('B mounted'); + return () => { + console.log('B unmounted'); + }; + }, []); + + return
B
; +}; + +export default function App() { + const [show, setShow] = React.useState(true); + + const toggle = () => { + setShow((prev) => !prev); + }; + + return ( +
+ +
{show ? : }
+
+ ); +} +``` + +In this code (strict mode), clicking the button will switch the rendering of A and B. So what will the order of console be when switching from A to B? The answer is: + +``` +B render +B render +A unmounted +B mounted +B unmounted +B mounted +``` + +We can see that the rendering of the new component is before the unmount callback of the old component. Remember the processing logic of `cssinjs` in React 17? Let's mark it: + +``` +B render // Write to cache and insert style tag +B render // Write to cache and insert style tag +A unmounted // **Reference count--** (Reference count changed from 1 to 0, so the style was unloaded) +B mounted // Reference count++ (Reference count changed from 0 to 1, but the style was inserted before unloaded) +B unmounted // Reference count-- +B mounted // Reference count++ +``` + +We finally find out that due to reference count is not updated in time, the style was unloaded, which in not as expected. + +And the solution is simple: when the count changes from 0 to 1, style will be inserted again. + ## Summary Suspense brings rendering performance improvements, but it also makes timing very important. It is not the best way to only 'work on' StrictMode. Different logic is used for different React versions is not good choice since it will have timing problem. `render` will trigger from parent node to child node in turn, while `useInsertionEffect` is the opposite. However, from the perspective of antd, the component styles are independent of each other, so this problem will not affect us. diff --git a/docs/blog/suspense.zh-CN.md b/docs/blog/suspense.zh-CN.md index 27d84129fb..df1c263ca3 100644 --- a/docs/blog/suspense.zh-CN.md +++ b/docs/blog/suspense.zh-CN.md @@ -175,6 +175,85 @@ useLayoutEffect(() => { 测量的 `useLayoutEffect` 先于注入样式执行，导致获取了错误的尺寸信息。也可以预测到这会对开发者产生影响。因而我们退而求其次，在 React 17 版本时会降级为原先的 `useMemo` 插入。 +## 新的兼容问题 + +在上面的方案中，我们启用了 `useInsertionEffect` 从而完美解决了渲染问题。但在 React 17 及以下版本，我们仍然会在 render 阶段插入样式，但是会在 effect 阶段让引用计数加一。但是这带来了新的问题，我们来看一段代码 ([CodeSandbox](https://codesandbox.io/s/aged-cdn-qjxmpz?file=/src/App.tsx:23-886))： + +```tsx +import React from 'react'; + +const A = () => { + React.useMemo(() => { + console.log('A render'); + }, []); + + React.useEffect(() => { + console.log('A mounted'); + return () => { + console.log('A unmounted'); + }; + }, []); + + return
A
; +}; + +const B = () => { + React.useMemo(() => { + console.log('B render'); + }, []); + + React.useEffect(() => { + console.log('B mounted'); + return () => { + console.log('B unmounted'); + }; + }, []); + + return
B
; +}; + +export default function App() { + const [show, setShow] = React.useState(true); + + const toggle = () => { + setShow((prev) => !prev); + }; + + return ( + + ); +} +``` + +在这段代码（严格模式）中，点击按钮会切换 A 与 B 的渲染。那么从 A 切换到 B 时，顺序会是什么样的呢？答案是: + +``` +B render +B render +A unmounted +B mounted +B unmounted +B mounted +``` + +可以看到新组件的渲染是在旧组件的卸载回调之前的。还记得 cssinjs 在 React 17 一下的处理逻辑吗？我们来标记一下： + +``` +B render // 写入 cache，插入样式 +B render // 写入 cache，插入样式（虽然是重复的，但是有缓存，不会有冗余） +A unmounted // **引用计数减一** （此时原本的计数是 1，执行后变为 0，触发了样式卸载） +B mounted // 引用计数加一 （此时计数是 1，但是样式已经被 A 连带卸载） +B unmounted // 引用计数减一 +B mounted // 引用计数加一 +``` + +这样就可以发现，当 A 与 B 共用一段样式时，由于计数没有几十更新，导致样式先被卸载了，后续也并没有触发插入逻辑，所以依然会导致丢失。 + +解决方案也很简单，当计数从 0 变为 1 时，重新插入样式即可。 + ## 总结 Suspense 在带来渲染能力提升的同时也让时序变得十分重要，仅仅对 StrictMode 进行处理并不是一个最优的方式。针对不同的 React 版本使用不同的逻辑其实会存在不同版本之间的时序问题，`render` 会从父节点到子节点依次触发，而 `useInsertionEffect` 则相反。不过从 antd 角度来说，组件样式之间相互独立，所以这种时序问题并不会对我们产生影响。 From 04e729d14acd89a1e0ed4851297211010049d61d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Wed, 19 Jul 2023 13:39:26 +0800 Subject: [PATCH 28/34] fix: Steps keyboard switch (#43644) --- components/steps/style/index.tsx | 13 ++++++++++--- package.json | 2 +- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx index ccd1658c71..cd2dafdc1d 100644 --- a/components/steps/style/index.tsx +++ b/components/steps/style/index.tsx @@ -1,6 +1,6 @@ import type { CSSObject } from '@ant-design/cssinjs'; import type { CSSProperties } from 'react'; -import { resetComponent } from '../../style'; +import { genFocusOutline, resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import genStepsCustomIconStyle from './custom-icon'; @@ -171,6 +171,7 @@ const genStepsItemStatusStyle = (status: StepItemStatusEnum, token: StepsToken): const genStepsItemStyle: GenerateStyle = (token) => { const { componentCls, motionDurationSlow } = token; const stepsItemCls = `${componentCls}-item`; // .ant-steps-item + const stepItemIconCls = `${stepsItemCls}-icon`; return { [stepsItemCls]: { @@ -189,12 +190,18 @@ const genStepsItemStyle: GenerateStyle = (token) => { }, [`${stepsItemCls}-container`]: { outline: 'none', + + [`&:focus-visible`]: { + [stepItemIconCls]: { + ...genFocusOutline(token), + }, + }, }, - [`${stepsItemCls}-icon, ${stepsItemCls}-content`]: { + [`${stepItemIconCls}, ${stepsItemCls}-content`]: { display: 'inline-block', verticalAlign: 'top', }, - [`${stepsItemCls}-icon`]: { + [stepItemIconCls]: { width: token.iconSize, height: token.iconSize, marginTop: 0, diff --git a/package.json b/package.json index a5d3d65722..e28cd897f7 100644 --- a/package.json +++ b/package.json @@ -144,7 +144,7 @@ "rc-segmented": "~2.2.0", "rc-select": "~14.5.0", "rc-slider": "~10.1.0", - "rc-steps": "~6.0.0", + "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", "rc-table": "~7.32.1", "rc-tabs": "~12.9.0", From 5eb9f5db9bc27d50e36c3ca2ce554587f03f6136 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 19 Jul 2023 14:44:39 +0800 Subject: [PATCH 29/34] fix: suffix icon should not use colorTextDisabled (#43646) --- components/date-picker/style/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 9f100a61ee..340ad44eb9 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -1024,6 +1024,7 @@ const genPickerStyle: GenerateStyle = (token) => { presetsWidth, presetsMaxWidth, boxShadowPopoverArrow, + colorTextQuaternary, } = token; return [ @@ -1054,7 +1055,7 @@ const genPickerStyle: GenerateStyle = (token) => { cursor: 'not-allowed', [`${componentCls}-suffix`]: { - color: colorTextDisabled, + color: colorTextQuaternary, }, }, From 20b5babd9e8faf03a143e4c15cb2643e243a0129 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Wed, 19 Jul 2023 16:56:08 +0800 Subject: [PATCH 30/34] docs: update docs about nextjs pages router (#43651) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: update docs about nextjs pages router * Update docs/react/use-with-next.en-US.md Co-authored-by: afc163 Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * docs: update docs --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> Co-authored-by: afc163 --- docs/react/use-with-next.en-US.md | 120 +++++++++++++++++++++++++++++- docs/react/use-with-next.zh-CN.md | 120 +++++++++++++++++++++++++++++- 2 files changed, 232 insertions(+), 8 deletions(-) diff --git a/docs/react/use-with-next.en-US.md b/docs/react/use-with-next.en-US.md index d2b7935fd3..b320dbd7c8 100644 --- a/docs/react/use-with-next.en-US.md +++ b/docs/react/use-with-next.en-US.md @@ -31,8 +31,6 @@ Now we install `antd` from yarn or npm or pnpm. Modify `src/app/page.tsx`, import Button component from `antd`. ```jsx -'use client'; - import React from 'react'; import { Button } from 'antd'; @@ -49,6 +47,120 @@ OK, you should now see a blue primary button displayed on the page. Next you can We are successfully running antd components now, go build your own application! +## Use the Pages Router of Next.js + +If you are using the Pages Router in Next.js and using antd as your component library, to make the antd component library work better in your Next.js application and provide a better user experience, you can try using the following method to extract and inject antd's first-screen styles into HTML to avoid page flicker. + +1. Install `@ant-design/cssinjs` + + + +2. Rewrite `pages/_document.tsx` + +```tsx +import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'; +import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; +export default class MyDocument extends Document { + static async getInitialProps(ctx: DocumentContext) { + const cache = createCache(); + const originalRenderPage = ctx.renderPage; + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => ( + + + + ), + }); + + const initialProps = await Document.getInitialProps(ctx); + // 1.1 extract style which had been used + const style = extractStyle(cache, true); + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {/* 1.2 inject css */} + + + ), + }; + } + + render() { + return ( + + + +
+ + + + ); + } +} +``` + +3. Supports custom themes + +```tsx +import React from 'react'; +import { ConfigProvider } from 'antd'; + +const withTheme = (node: JSX.Element) => ( + <> + + + {node} + + + +); + +export default withTheme; +``` + +4. Rewrite `pages/_app.tsx` + +```tsx +import '../styles/globals.css'; +import type { AppProps } from 'next/app'; +import withTheme from '../theme'; + +export default function App({ Component, pageProps }: AppProps) { + return withTheme(); +} +``` + +5. Use antd in page component + +```tsx +import { Button } from 'antd'; + +export default function Home() { + return ( +
+ +
+ ); +} +``` + +For more detailed information, please refer to [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style). + ## Using Next.js App Router If you are using the App Router in Next.js and using antd as your component library, to make the antd component library work better in your Next.js application and provide a better user experience, you can try using the following method to extract and inject antd's first-screen styles into HTML to avoid page flicker. @@ -122,8 +234,6 @@ export default theme; 5. Use in page ```tsx -'use client'; - import { Button, ConfigProvider } from 'antd'; import React from 'react'; import theme from './themeConfig'; @@ -139,4 +249,6 @@ const HomePage: React.FC = () => ( export default HomePage; ``` +> Tips: The above method does not use sub-components such as `Select.Option` and `Typography.text` in the page, so it can be used normally. However, if you use a sub-component like this in your page, you will currently see the following warning in next.js: `Error: Cannot access .Option on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.`, currently need to wait for Next.js official solution. Before again, if you use the above sub-components in your page, you can add "use client" to the first line of the page component to avoid warnings. See examples for more details: [with-sub-components](https://github.com/ant-design/ant-design-examples/blob/main/examples/with-nextjs-app-router-inline-style/src/app/with-sub-components/page.tsx). + For more detailed information, please refer to [with-nextjs-app-router-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-app-router-inline-style)。 diff --git a/docs/react/use-with-next.zh-CN.md b/docs/react/use-with-next.zh-CN.md index fd2e79ef0f..564e473a2a 100644 --- a/docs/react/use-with-next.zh-CN.md +++ b/docs/react/use-with-next.zh-CN.md @@ -49,6 +49,120 @@ export default Home; 我们现在已经把 antd 组件成功运行起来了，开始开发你的应用吧！ +## 使用 Next.js 的 Pages Router + +如果你在 Next.js 当中使用了 Pages Router, 并使用 antd 作为页面组件库，为了让 antd 组件库在你的 Next.js 应用中能够更好的工作，提供更好的用户体验，你可以尝试使用下面的方式将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况。 + +1. 安装 `@ant-design/cssinjs` + + + +2. 改写 `pages/_document.tsx` + +```tsx +import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'; +import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; +export default class MyDocument extends Document { + static async getInitialProps(ctx: DocumentContext) { + const cache = createCache(); + const originalRenderPage = ctx.renderPage; + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => ( + + + + ), + }); + + const initialProps = await Document.getInitialProps(ctx); + // 1.1 extract style which had been used + const style = extractStyle(cache, true); + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {/* 1.2 inject css */} + + + ), + }; + } + + render() { + return ( + + + +
+ + + + ); + } +} +``` + +3. 支持自定义主题 + +```tsx +import React from 'react'; +import { ConfigProvider } from 'antd'; + +const withTheme = (node: JSX.Element) => ( + <> + + + {node} + + + +); + +export default withTheme; +``` + +4. 改写 `pages/_app.tsx` + +```tsx +import '../styles/globals.css'; +import type { AppProps } from 'next/app'; +import withTheme from '../theme'; + +export default function App({ Component, pageProps }: AppProps) { + return withTheme(); +} +``` + +5. 在页面中使用 antd + +```tsx +import { Button } from 'antd'; + +export default function Home() { + return ( +
+ +
+ ); +} +``` + +更多详细的细节可以参考 [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)。 + ## 使用 Next.js 的 App Router 如果你在 Next.js 当中使用了 App Router, 并使用 antd 作为页面组件库，为了让 antd 组件库在你的 Next.js 应用中能够更好的工作，提供更好的用户体验，你可以尝试使用下面的方式将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况。 @@ -60,8 +174,6 @@ export default Home; 2. 创建 `lib/AntdRegistry.tsx` ```tsx -'use client'; - import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; import { useServerInsertedHTML } from 'next/navigation'; import React from 'react'; @@ -122,8 +234,6 @@ export default theme; 5. 在页面中使用 ```tsx -'use client'; - import { Button, ConfigProvider } from 'antd'; import React from 'react'; import theme from './themeConfig'; @@ -139,4 +249,6 @@ const HomePage: React.FC = () => ( export default HomePage; ``` +> 注意: 上述方式没有在页面中使用如：`Select.Option` 、 `Typography.Text` 等子组件，因此可以正常使用。但如果你的页面中有使用类似这样的子组件，目前在 Next.js 中会看到如下警告：`Error: Cannot access .Option on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.`，目前需等待 Next.js 官方解决。再次之前，如果你的页面中使用了上述子组件，可在页面组件第一行加上 `"use client";` 来避免警告。更多细节可以参考示例：[with-sub-components](https://github.com/ant-design/ant-design-examples/blob/main/examples/with-nextjs-app-router-inline-style/src/app/with-sub-components/page.tsx)。 + 更多详细的细节可以参考 [with-nextjs-app-router-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-app-router-inline-style)。 From 8a4621c72dbe1984ef86d10739bb255c4c6b7319 Mon Sep 17 00:00:00 2001 From: AKing <827088092@qq.com> Date: Wed, 19 Jul 2023 17:23:45 +0800 Subject: [PATCH 31/34] fix: uniformly set height and border on inputs (#43548) --- components/input-number/style/index.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/input-number/style/index.ts b/components/input-number/style/index.ts index 6ff1daf988..a2cc635e1a 100644 --- a/components/input-number/style/index.ts +++ b/components/input-number/style/index.ts @@ -55,8 +55,8 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe colorTextDescription, motionDurationMid, colorPrimary, - controlHeight, inputPaddingHorizontal, + inputPaddingVertical, colorBgContainer, colorTextDisabled, borderRadiusSM, @@ -164,8 +164,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe '&-input': { ...resetComponent(token), width: '100%', - height: controlHeight - 2 * lineWidth, - padding: `0 ${inputPaddingHorizontal}px`, + padding: `${inputPaddingVertical}px ${inputPaddingHorizontal}px`, textAlign: 'start', backgroundColor: 'transparent', border: 0, @@ -320,6 +319,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe const genAffixWrapperStyles: GenerateStyle = (token: InputNumberToken) => { const { componentCls, + inputPaddingVertical, inputPaddingHorizontal, inputAffixPadding, controlWidth, @@ -370,7 +370,7 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb }, [`input${componentCls}-input`]: { - padding: 0, + padding: `${inputPaddingVertical}px 0`, }, '&::before': { From 9d66105558f1d55062ecd160ab6898419937f71b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Wed, 19 Jul 2023 17:49:07 +0800 Subject: [PATCH 32/34] docs: add faq about using sub-component in next.js App Router mode (#43655) --- docs/react/faq.en-US.md | 27 +++++++++++++++++++++++++++ docs/react/faq.zh-CN.md | 27 +++++++++++++++++++++++++++ 2 files changed, 54 insertions(+) diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md index 865845e137..658c2fe4cd 100644 --- a/docs/react/faq.en-US.md +++ b/docs/react/faq.en-US.md @@ -265,3 +265,30 @@ If you encounter the above error, please check the current project `tsconfig.jso ``` The above problem occurs if `strictNullChecks` is set to `true`, If you can determine the project don't need this configuration (see [strictNullChecks](https://www.typescriptlang.org/zh/tsconfig#strictNullChecks) to judge whether need the configuration). You can try changing to `false` to turn off the control strict check. However, if you do need to enable this feature, you can avoid this situation by using other types instead of `null` when designing types + +## The antd component reported an error when using the App Router of Next.js + +If you are using the App Router of Next.js, when you use the sub-components provided by some antd components, such as `Select.Option `, `Form.Item`, etc., you may get the following error: + +```bash +Error: Cannot access .Option on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. +``` + +At present, this problem is waiting for Next.js to give an official solution, before this, if you use sub-components in your page, you can try to add the following client tag at the top of the page to solve this problem: + +```tsx +'use client'; + +// This is not real world code, just for explain +export default () => { + return ( +
+
+ + + +
+
+ ); +}; +``` diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md index 35973d24f7..93c7189808 100644 --- a/docs/react/faq.zh-CN.md +++ b/docs/react/faq.zh-CN.md @@ -287,3 +287,30 @@ export default () => { ``` 如果 `strictNullChecks` 的值被设置为 `true` 就会出现上述问题，如果你确定项目中可以不需要这个检测配置（查看[strictNullChecks](https://www.typescriptlang.org/zh/tsconfig#strictNullChecks)判断是否需要该配置），可以尝试改为 `false` 关闭控制严格检查功能。但如果你确实需要开启这个功能，那么，你可以在设计类型时，使用其他类型替代 `null` 以避免出现这种情况。 + +## 使用 Next.js 的 App Router 时 antd 组件报错 + +如果你在使用 Next.js 的 App Router，当你使用 antd 中某些组件提供的子组件，如：`Select.Option`、`Form.Item` 等，可能会出现如下报错： + +```bash +Error: Cannot access .Option on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. +``` + +目前这个问题等待 Next.js 给出官方的解决方案，在此之前，如果在你的页面中有使用子组件的话，可以尝试在页面顶部增加如下客户端标签解决这个问题： + +```tsx +'use client'; + +// This is not real world code, just for explain +export default () => { + return ( +
+
+ + + +
+
+ ); +}; +``` From 0ca05a7e396ca23007cb982cbd364e1f19d173e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Wed, 19 Jul 2023 18:43:44 +0800 Subject: [PATCH 33/34] docs: update _document example in next.js (#43657) --- docs/react/use-with-next.en-US.md | 87 ++++++++++++++---------------- docs/react/use-with-next.zh-CN.md | 89 ++++++++++++++----------------- 2 files changed, 79 insertions(+), 97 deletions(-) diff --git a/docs/react/use-with-next.en-US.md b/docs/react/use-with-next.en-US.md index b320dbd7c8..150194f7ea 100644 --- a/docs/react/use-with-next.en-US.md +++ b/docs/react/use-with-next.en-US.md @@ -60,46 +60,45 @@ If you are using the Pages Router in Next.js and using antd as your component li ```tsx import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'; import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; -export default class MyDocument extends Document { - static async getInitialProps(ctx: DocumentContext) { - const cache = createCache(); - const originalRenderPage = ctx.renderPage; - ctx.renderPage = () => - originalRenderPage({ - enhanceApp: (App) => (props) => ( - - - - ), - }); - - const initialProps = await Document.getInitialProps(ctx); - // 1.1 extract style which had been used - const style = extractStyle(cache, true); - return { - ...initialProps, - styles: ( - <> - {initialProps.styles} - {/* 1.2 inject css */} - - + +const MyDocument = () => ( + + + +
+ + + +); + +MyDocument.getInitialProps = async (ctx: DocumentContext) => { + const cache = createCache(); + const originalRenderPage = ctx.renderPage; + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => ( + + + ), - }; - } - - render() { - return ( - - - -
- - - - ); - } -} + }); + + const initialProps = await Document.getInitialProps(ctx); + // 1.1 extract style which had been used + const style = extractStyle(cache, true); + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {/* 1.2 inject css */} + + + ), + }; +}; + +export default MyDocument; ``` 3. Supports custom themes @@ -117,15 +116,7 @@ const withTheme = (node: JSX.Element) => ( }, }} > - - {node} - + {node} ); diff --git a/docs/react/use-with-next.zh-CN.md b/docs/react/use-with-next.zh-CN.md index 564e473a2a..e98c5efb18 100644 --- a/docs/react/use-with-next.zh-CN.md +++ b/docs/react/use-with-next.zh-CN.md @@ -62,46 +62,45 @@ export default Home; ```tsx import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'; import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; -export default class MyDocument extends Document { - static async getInitialProps(ctx: DocumentContext) { - const cache = createCache(); - const originalRenderPage = ctx.renderPage; - ctx.renderPage = () => - originalRenderPage({ - enhanceApp: (App) => (props) => ( - - - - ), - }); - - const initialProps = await Document.getInitialProps(ctx); - // 1.1 extract style which had been used - const style = extractStyle(cache, true); - return { - ...initialProps, - styles: ( - <> - {initialProps.styles} - {/* 1.2 inject css */} - - + +const MyDocument = () => ( + + + +
+ + + +); + +MyDocument.getInitialProps = async (ctx: DocumentContext) => { + const cache = createCache(); + const originalRenderPage = ctx.renderPage; + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => ( + + + ), - }; - } - - render() { - return ( - - - -
- - - - ); - } -} + }); + + const initialProps = await Document.getInitialProps(ctx); + // 1.1 extract style which had been used + const style = extractStyle(cache, true); + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {/* 1.2 inject css */} + + + ), + }; +}; + +export default MyDocument; ``` 3. 支持自定义主题 @@ -119,15 +118,7 @@ const withTheme = (node: JSX.Element) => ( }, }} > - - {node} - + {node} ); @@ -249,6 +240,6 @@ const HomePage: React.FC = () => ( export default HomePage; ``` -> 注意: 上述方式没有在页面中使用如：`Select.Option` 、 `Typography.Text` 等子组件，因此可以正常使用。但如果你的页面中有使用类似这样的子组件，目前在 Next.js 中会看到如下警告：`Error: Cannot access .Option on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.`，目前需等待 Next.js 官方解决。再次之前，如果你的页面中使用了上述子组件，可在页面组件第一行加上 `"use client";` 来避免警告。更多细节可以参考示例：[with-sub-components](https://github.com/ant-design/ant-design-examples/blob/main/examples/with-nextjs-app-router-inline-style/src/app/with-sub-components/page.tsx)。 +> 注意: 上述方式没有在页面中使用如：`Select.Option` 、 `Typography.Text` 等子组件，因此可以正常使用。但如果你的页面中有使用类似这样的子组件，目前在 Next.js 中会看到如下警告：`Error: Cannot access .Option on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.`，目前需等待 Next.js 官方解决。在此之前，如果你的页面中使用了上述子组件，可在页面组件第一行加上 `"use client";` 来避免警告。更多细节可以参考示例：[with-sub-components](https://github.com/ant-design/ant-design-examples/blob/main/examples/with-nextjs-app-router-inline-style/src/app/with-sub-components/page.tsx)。 更多详细的细节可以参考 [with-nextjs-app-router-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-app-router-inline-style)。 From 473130fe3203991a9ec51c96c21be4950c59021b Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 19 Jul 2023 18:52:07 +0800 Subject: [PATCH 34/34] fix: menu style (#43656) --- components/menu/style/index.tsx | 2 +- components/menu/style/theme.tsx | 17 +++++++++++------ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx index 4854e3a3f9..4c786a1f3d 100644 --- a/components/menu/style/index.tsx +++ b/components/menu/style/index.tsx @@ -941,7 +941,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul colorItemBgHover: colorBgTextHover, itemHoverBg: colorBgTextHover, colorItemBgActive: colorFillContent, - itemActiveBg: colorFillContent, + itemActiveBg: controlItemBgActive, colorSubItemBg: colorFillAlter, subMenuItemBg: colorFillAlter, colorItemBgSelected: controlItemBgActive, diff --git a/components/menu/style/theme.tsx b/components/menu/style/theme.tsx index 5be20ef0f1..3b2215b924 100644 --- a/components/menu/style/theme.tsx +++ b/components/menu/style/theme.tsx @@ -38,6 +38,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation dangerItemSelectedBg, itemHoverBg, + itemActiveBg, menuSubMenuBg, // Horizontal @@ -75,11 +76,12 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation }, // Hover - [`${componentCls}-item:hover, ${componentCls}-submenu-title:hover`]: { - [`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: { - color: itemHoverColor, + [`${componentCls}-item:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: + { + [`&:hover, > ${componentCls}-submenu-title:hover`]: { + color: itemHoverColor, + }, }, - }, [`&:not(${componentCls}-horizontal)`]: { [`${componentCls}-item:not(${componentCls}-item-selected)`]: { @@ -88,7 +90,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation }, '&:active': { - backgroundColor: itemSelectedBg, + backgroundColor: itemActiveBg, }, }, @@ -98,7 +100,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation }, '&:active': { - backgroundColor: itemSelectedBg, + backgroundColor: itemActiveBg, }, }, }, @@ -193,6 +195,9 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation [`&-selected`]: { color: horizontalItemSelectedColor, backgroundColor: horizontalItemSelectedBg, + '&:hover': { + backgroundColor: horizontalItemSelectedBg, + }, '&::after': { borderBottomWidth: activeBarHeight, borderBottomColor: horizontalItemSelectedColor,