docs: 5.0.4 changelog (#39256 )

* docs: 5.0.4 changelog * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 <afc163@gmail.com> * docs: adjust changelog & tree style * docs: update desc * docs: add missing one * chore: adjust tree style * docs: add more Co-authored-by: afc163 <afc163@gmail.com>
fix(switch): only one of the two props checkedChildren or unCheckedChildren will not work (#39262 )
2026-02-18 07:12:28 +08:00 · 2022-12-05 15:17:58 +08:00 · 2022-12-05 15:03:59 +08:00 · 2022-12-05 14:06:42 +08:00 · 2022-12-05 12:14:05 +08:00 · 2022-12-05 12:05:46 +08:00
115 changed files with 984 additions and 909 deletions
--- a/.dumi/hooks/useMenu.tsx
+++ b/.dumi/hooks/useMenu.tsx
@@ -44,7 +44,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>

    return (
      sidebarItems?.reduce<Exclude<MenuProps['items'], undefined>>((result, group) => {
-        if (group.title) {
+        if (group?.title) {
          // 设计文档特殊处理二级分组
          if (pathname.startsWith('/docs/spec')) {
            const childrenGroup = group.children.reduce<
@@ -63,7 +63,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
                label: (
                  <Link to={`${item.link}${search}`}>
                    {before}
-                    {item.title}
+                    {item?.title}
                    {after}
                  </Link>
                ),
@@ -80,7 +80,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
                    label: (
                      <Link to={`${item.link}${search}`}>
                        {before}
-                        {item.title}
+                        {item?.title}
                        {after}
                      </Link>
                    ),
@@ -90,20 +90,20 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
              }
            });
            result.push({
-              label: group.title,
-              key: group.title,
+              label: group?.title,
+              key: group?.title,
              children: childItems,
            });
          } else {
            result.push({
              type: 'group',
-              label: group.title,
-              key: group.title,
+              label: group?.title,
+              key: group?.title,
              children: group.children?.map((item) => ({
                label: (
                  <Link to={`${item.link}${search}`}>
                    {before}
-                    <span key="english">{item.title}</span>
+                    <span key="english">{item?.title}</span>
                    <span className="chinese" key="chinese">
                      {(item.frontmatter as any).subtitle}
                    </span>
@@ -120,7 +120,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
              label: (
                <Link to={`${item.link}${search}`}>
                  {before}
-                  {item.title}
+                  {item?.title}
                  {after}
                </Link>
              ),
--- a/.dumi/pages/index/components/BannerRecommends.tsx
+++ b/.dumi/pages/index/components/BannerRecommends.tsx
@@ -58,8 +58,8 @@ export default function BannerRecommends({ extras = [], icons = [] }: BannerReco
        }
        const icon = icons.find((i) => i.name === extra.source);
        return (
-          <a key={extra.title} href={extra.href} target="_blank" css={style.card} rel="noreferrer">
-            <Typography.Title level={5}>{extra.title}</Typography.Title>
+          <a key={extra?.title} href={extra.href} target="_blank" css={style.card} rel="noreferrer">
+            <Typography.Title level={5}>{extra?.title}</Typography.Title>
            <Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
              {extra.description}
            </Typography.Paragraph>
--- a/.dumi/pages/index/components/RecommendsOld.tsx
+++ b/.dumi/pages/index/components/RecommendsOld.tsx
@@ -91,7 +91,7 @@ export default function Recommends({ recommendations = [] }: RecommendsProps) {
            {data ? (
              <div css={style.card} style={{ backgroundImage: `url(${data.img})` }}>
                <div className="intro">
-                  <Typography.Title level={4}>{data.title}</Typography.Title>
+                  <Typography.Title level={4}>{data?.title}</Typography.Title>
                  <Typography.Paragraph>{data.description}</Typography.Paragraph>
                </div>
              </div>
--- a/.dumi/pages/index/components/Theme/ColorPicker.tsx
+++ b/.dumi/pages/index/components/Theme/ColorPicker.tsx
@@ -18,6 +18,17 @@ const useStyle = () => {
      border-radius: 100%;
      cursor: pointer;
      transition: all ${token.motionDurationFast};
+      display: inline-block;
+
+      & > input[type="radio"] {
+        width: 0;
+        height: 0;
+        opacity: 0;
+      }
+
+      &:focus-within {
+        // need ？
+      }
    `,

    colorActive: css`
@@ -91,7 +102,8 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
      <Space size="middle">
        {matchColors.map(({ color, active, picker }) => {
          let colorNode = (
-            <div
+            // eslint-disable-next-line jsx-a11y/label-has-associated-control
+            <label
              key={color}
              css={[style.color, active && style.colorActive]}
              style={{
@@ -102,7 +114,9 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
                  onChange?.(color);
                }
              }}
-            />
+            >
+              <input type="radio" name={picker ? 'picker' : 'color'} tabIndex={picker ? -1 : 0} />
+            </label>
          );

          if (picker) {
--- a/.dumi/pages/index/components/Theme/ThemePicker.tsx
+++ b/.dumi/pages/index/components/Theme/ThemePicker.tsx
@@ -37,6 +37,13 @@ const useStyle = () => {
      cursor: pointer;
      transition: all ${token.motionDurationSlow};
      overflow: hidden;
+      display: inline-block;
+
+      & > input[type="radio"] {
+        width: 0;
+        height: 0;
+        opacity: 0;
+      }

      img {
        vertical-align: top;
@@ -44,6 +51,7 @@ const useStyle = () => {
          0 9px 28px 8px rgba(0, 0, 0, 0.05);
      }

+      &:focus-within,
      &:hover {
        transform: scale(1.04);
      }
@@ -54,7 +62,7 @@ const useStyle = () => {
        0 0 0 ${token.controlOutlineWidth * 2 + 1}px ${token.colorPrimary};

      &,
-      &:hover {
+      &:hover:not(:focus-within) {
        transform: scale(1);
      }
    `,
@@ -79,15 +87,16 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) {

        return (
          <Space key={theme} direction="vertical" align="center">
-            <div css={[style.themeCard, value === theme && style.themeCardActive]}>
-              <img
-                src={url}
-                onClick={() => {
-                  onChange?.(theme);
-                }}
-                alt=""
-              />
-            </div>
+            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+            <label
+              css={[style.themeCard, value === theme && style.themeCardActive]}
+              onClick={() => {
+                onChange?.(theme);
+              }}
+            >
+              <input type="radio" name="theme" />
+              <img src={url} alt={theme} />
+            </label>
            <span>{locale[theme as keyof typeof locale]}</span>
          </Space>
        );
--- a/.dumi/theme/builtins/ComponentOverview/index.tsx
+++ b/.dumi/theme/builtins/ComponentOverview/index.tsx
@@ -97,11 +97,11 @@ const Overview: React.FC = () => {
  const groups = useMemo<{ title: string; children: Component[] }[]>(
    () =>
      data
-        .filter((item) => item.title)
+        .filter((item) => item?.title)
        .map<{ title: string; children: Component[] }>((item) => ({
-          title: item.title!,
+          title: item?.title,
          children: item.children.map((child) => ({
-            title: child.frontmatter.title,
+            title: child.frontmatter?.title,
            subtitle: child.frontmatter.subtitle,
            cover: child.frontmatter.cover,
            link: child.link,
@@ -136,19 +136,19 @@ const Overview: React.FC = () => {
      />
      <Divider />
      {groups
-        .filter((i) => i.title)
+        .filter((i) => i?.title)
        .map((group) => {
          const components = group?.children?.filter(
            (component) =>
              !search.trim() ||
-              component.title.toLowerCase().includes(search.trim().toLowerCase()) ||
+              component?.title?.toLowerCase()?.includes(search.trim().toLowerCase()) ||
              (component?.subtitle || '').toLowerCase().includes(search.trim().toLowerCase()),
          );
          return components?.length ? (
-            <div key={group.title} css={style.componentsOverview}>
+            <div key={group?.title} css={style.componentsOverview}>
              <Title level={2} css={style.componentsOverviewGroupTitle}>
                <Space align="center">
-                  <span style={{ fontSize: 24 }}>{group.title}</span>
+                  <span style={{ fontSize: 24 }}>{group?.title}</span>
                  <Tag style={{ display: 'block' }}>{components.length}</Tag>
                </Space>
              </Title>
@@ -160,7 +160,7 @@ const Overview: React.FC = () => {
                  const ComponentLink = !url.startsWith('http') ? Link : 'a';

                  return (
-                    <Col xs={24} sm={12} lg={8} xl={6} key={component.title}>
+                    <Col xs={24} sm={12} lg={8} xl={6} key={component?.title}>
                      <ComponentLink to={url} href={url} onClick={() => onClickCard(url)}>
                        <Card
                          bodyStyle={{
@@ -172,12 +172,12 @@ const Overview: React.FC = () => {
                          css={style.componentsOverviewCard}
                          title={
                            <div css={style.componentsOverviewTitle}>
-                              {component.title} {component.subtitle}
+                              {component?.title} {component.subtitle}
                            </div>
                          }
                        >
                          <div css={style.componentsOverviewImg}>
-                            <img src={component.cover} alt={component.title} />
+                            <img src={component.cover} alt={component?.title} />
                          </div>
                        </Card>
                      </ComponentLink>
--- a/.dumi/theme/builtins/Previewer/index.jsx
+++ b/.dumi/theme/builtins/Previewer/index.jsx
@@ -158,7 +158,7 @@ class Demo extends React.Component {
      expand: codeExpand,
      'code-box-debug': meta.debug,
    });
-    const localizedTitle = meta.title[locale] || meta.title;
+    const localizedTitle = meta?.title[locale] || meta?.title;
    const localizeIntro = content[locale] || content;
    const introChildren = <div dangerouslySetInnerHTML={{ __html: localizeIntro }} />;

@@ -407,25 +407,24 @@ createRoot(document.getElementById('container')).render(<Demo />);
                <CodeSandboxIcon className="code-box-codesandbox" />
              </Tooltip>
            </form>
-            <form
-              className="code-box-code-action"
-              action="https://codepen.io/pen/define"
-              method="POST"
-              target="_blank"
-              ref={this.codepenIconRef}
-              onClick={() => {
-                this.track({ type: 'codepen', demo: meta.id });
-                this.codepenIconRef.current.submit();
-              }}
-              style={{
-                display: sourceCode ? '' : 'none',
-              }}
-            >
-              <input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
-              <Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
-                <CodePenIcon className="code-box-codepen" />
-              </Tooltip>
-            </form>
+            {sourceCode && (
+              <form
+                className="code-box-code-action"
+                action="https://codepen.io/pen/define"
+                method="POST"
+                target="_blank"
+                ref={this.codepenIconRef}
+                onClick={() => {
+                  this.track({ type: 'codepen', demo: meta.id });
+                  this.codepenIconRef.current.submit();
+                }}
+              >
+                <input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
+                <Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
+                  <CodePenIcon className="code-box-codepen" />
+                </Tooltip>
+              </form>
+            )}
            <Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
              <span
                className="code-box-code-action"
--- a/.dumi/theme/builtins/ResourceArticles/index.tsx
+++ b/.dumi/theme/builtins/ResourceArticles/index.tsx
@@ -84,7 +84,7 @@ const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = []
                </a>
                <Divider type="vertical" />
                <a href={article.href} target="_blank" rel="noreferrer">
-                  {article.title}
+                  {article?.title}
                </a>
              </li>
            );
--- a/.dumi/theme/builtins/ResourceCards/index.tsx
+++ b/.dumi/theme/builtins/ResourceCards/index.tsx
@@ -94,7 +94,7 @@ const ResourceCard: React.FC<ResourceCardProps> = ({ resource }) => {
          style={coverColor ? { backgroundColor: coverColor } : {}}
        />
        {official && <div css={styles.badge}>Official</div>}
-        <p css={styles.title}>{title}</p>
+        <p css={styles?.title}>{title}</p>
        <p css={styles.description}>{description}</p>
      </a>
    </Col>
@@ -108,7 +108,7 @@ export type ResourceCardsProps = {
 const ResourceCards: React.FC<ResourceCardsProps> = ({ resources }) => (
  <Row style={{ margin: '-12px -12px 0 -12px' }}>
    {resources.map((item) => (
-      <ResourceCard resource={item} key={item.title} />
+      <ResourceCard resource={item} key={item?.title} />
    ))}
  </Row>
 );
--- a/.dumi/theme/builtins/TokenTable/index.tsx
+++ b/.dumi/theme/builtins/TokenTable/index.tsx
@@ -102,12 +102,14 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {

  const data = useMemo<TokenData[]>(
    () =>
-      tokenMeta[type].map((token) => ({
-        name: token.token,
-        desc: lang === 'cn' ? token.desc : token.descEn,
-        type: token.type,
-        value: (defaultToken as any)[token.name],
-      })),
+      Object.entries(tokenMeta)
+        .filter(([, meta]) => meta.source === type)
+        .map(([token, meta]) => ({
+          name: token,
+          desc: lang === 'cn' ? meta.desc : meta.descEn,
+          type: meta.type,
+          value: (defaultToken as any)[token],
+        })),
    [type, lang],
  );

--- a/.dumi/theme/common/CommonHelmet.tsx
+++ b/.dumi/theme/common/CommonHelmet.tsx
@@ -5,7 +5,9 @@ const CommonHelmet = () => {
  const meta = useRouteMeta();

  const [title, description] = useMemo(() => {
-    const helmetTitle = `${meta.frontmatter.subtitle || ''} ${meta.frontmatter.title} - Ant Design`;
+    const helmetTitle = `${meta.frontmatter.subtitle || ''} ${
+      meta.frontmatter?.title
+    } - Ant Design`;
    const helmetDescription = meta.frontmatter.description;
    return [helmetTitle, helmetDescription];
  }, [meta]);
--- a/.dumi/theme/common/GlobalStyles.tsx
+++ b/.dumi/theme/common/GlobalStyles.tsx
@@ -1083,7 +1083,7 @@ const GlobalStyles = () => {
              }
            }

-            &-actions > &-code-action {
+            &-actions &-code-action {
              position: relative;
              display: flex;
              align-items: center;
@@ -1112,10 +1112,6 @@ const GlobalStyles = () => {
              cursor: pointer;
              transition: transform 0.24s;

-              &:hover {
-                transform: scale(1.1);
-              }
-
              &${iconCls}-check {
                color: ${token['green-6']} !important;
                font-weight: bold;
--- a/.dumi/theme/layouts/DocLayout/index.tsx
+++ b/.dumi/theme/layouts/DocLayout/index.tsx
@@ -7,7 +7,6 @@ import type { DirectionType } from 'antd/es/config-provider';
 import ConfigProvider from 'antd/es/config-provider';
 import classNames from 'classnames';
 import zhCN from 'antd/es/locale/zh_CN';
-import { createCache, StyleProvider } from '@ant-design/cssinjs';
 import Header from '../../slots/Header';
 import Footer from '../../slots/Footer';
 import useLocale from '../../../hooks/useLocale';
@@ -17,11 +16,6 @@ import ResourceLayout from '../ResourceLayout';
 import GlobalStyles from '../../common/GlobalStyles';
 import SidebarLayout from '../SidebarLayout';

-const styleCache = createCache();
-if (typeof global !== 'undefined') {
-  (global as any).styleCache = styleCache;
-}
-
 const locales = {
  cn: {
    title: 'Ant Design - 一套企业级 UI 设计语言和 React 组件库',
@@ -135,34 +129,32 @@ const DocLayout: React.FC = () => {
  );

  return (
-    <StyleProvider cache={styleCache}>
-      <SiteContext.Provider value={siteContextValue}>
-        <Helmet encodeSpecialCharacters={false}>
-          <html
-            lang={lang}
-            data-direction={direction}
-            className={classNames({ [`rtl`]: direction === 'rtl' })}
-          />
-          <title>{locale.title}</title>
-          <link
-            sizes="144x144"
-            href="https://gw.alipayobjects.com/zos/antfincdn/UmVnt3t4T0/antd.png"
-          />
-          <meta name="description" content={locale.description} />
-          <meta property="og:title" content={locale.title} />
-          <meta property="og:type" content="website" />
-          <meta
-            property="og:image"
-            content="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png"
-          />
-        </Helmet>
-        <ConfigProvider locale={lang === 'cn' ? zhCN : undefined} direction={direction}>
-          <GlobalStyles />
-          <Header changeDirection={changeDirection} />
-          {content}
-        </ConfigProvider>
-      </SiteContext.Provider>
-    </StyleProvider>
+    <SiteContext.Provider value={siteContextValue}>
+      <Helmet encodeSpecialCharacters={false}>
+        <html
+          lang={lang}
+          data-direction={direction}
+          className={classNames({ [`rtl`]: direction === 'rtl' })}
+        />
+        <title>{locale?.title}</title>
+        <link
+          sizes="144x144"
+          href="https://gw.alipayobjects.com/zos/antfincdn/UmVnt3t4T0/antd.png"
+        />
+        <meta name="description" content={locale.description} />
+        <meta property="og:title" content={locale?.title} />
+        <meta property="og:type" content="website" />
+        <meta
+          property="og:image"
+          content="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png"
+        />
+      </Helmet>
+      <ConfigProvider locale={lang === 'cn' ? zhCN : undefined} direction={direction}>
+        <GlobalStyles />
+        <Header changeDirection={changeDirection} />
+        {content}
+      </ConfigProvider>
+    </SiteContext.Provider>
  );
 };

--- a/.dumi/theme/layouts/GlobalLayout.tsx
+++ b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -1,12 +1,16 @@
-import React, { useLayoutEffect } from 'react';
+import React, { startTransition, useLayoutEffect } from 'react';
 import { useOutlet } from 'dumi';
 import { ConfigProvider, theme as antdTheme } from 'antd';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
-import type { ThemeContextProps } from '../slots/ThemeContext';
-import ThemeContext from '../slots/ThemeContext';
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
 import ThemeSwitch from '../common/ThemeSwitch';
 import useLocation from '../../hooks/useLocation';

+const styleCache = createCache();
+if (typeof global !== 'undefined') {
+  (global as any).styleCache = styleCache;
+}
+
 const ANT_DESIGN_SITE_THEME = 'antd-site-theme';

 const getAlgorithm = (theme: string) => {
@@ -54,38 +58,24 @@ const GlobalLayout: React.FC = () => {
    );
  };

-  const contextValue = React.useMemo<ThemeContextProps>(
-    () => ({
-      theme,
-      setTheme: handleThemeChange,
-    }),
-    [theme],
-  );
-
  useLayoutEffect(() => {
    const localTheme = localStorage.getItem(ANT_DESIGN_SITE_THEME);
    if (localTheme) {
-      try {
-        const themeConfig = JSON.parse(localTheme);
-        if (themeConfig.algorithm) {
-          themeConfig.algorithm = themeConfig.algorithm.map((item: string) => getAlgorithm(item));
-        } else {
-          themeConfig.algorithm = [antdTheme.defaultAlgorithm];
-        }
-        setTheme(themeConfig);
-      } catch (e) {
-        console.error(e);
+      const themeConfig = JSON.parse(localTheme);
+      if (themeConfig.algorithm) {
+        themeConfig.algorithm = themeConfig.algorithm.map((item: string) => getAlgorithm(item));
+      } else {
+        themeConfig.algorithm = [antdTheme.defaultAlgorithm];
      }
+      startTransition(() => {
+        setTheme(themeConfig);
+      });
    }
  }, []);

  return (
-    <ThemeContext.Provider value={contextValue}>
-      <ConfigProvider
-        theme={{
-          ...theme,
-        }}
-      >
+    <StyleProvider cache={styleCache}>
+      <ConfigProvider theme={theme}>
        {outlet}
        {!pathname.startsWith('/~demos') && (
          <ThemeSwitch
@@ -94,7 +84,7 @@ const GlobalLayout: React.FC = () => {
          />
        )}
      </ConfigProvider>
-    </ThemeContext.Provider>
+    </StyleProvider>
  );
 };

--- a/.dumi/theme/layouts/ResourceLayout/index.tsx
+++ b/.dumi/theme/layouts/ResourceLayout/index.tsx
@@ -122,7 +122,7 @@ const ResourceLayout: FC<ResourceLayoutProps> = ({ children }) => {
          <AffixTabs />
          <div css={styles.banner}>
            <Typography.Title style={{ fontSize: 30 }}>
-              {meta.frontmatter.title}
+              {meta.frontmatter?.title}
              <EditButton
                title={<FormattedMessage id="app.content.edit-page" />}
                filename={meta.frontmatter.filename}
--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.dumi/theme/slots/Content/index.tsx
@@ -101,7 +101,7 @@ type AnchorItem = {

 const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
  const meta = useRouteMeta();
-  const { pathname } = useLocation();
+  const { pathname, hash } = useLocation();
  const { formatMessage } = useIntl();
  const styles = useStyle();
  const { direction } = useContext(SiteContext);
@@ -112,8 +112,10 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
    [meta],
  );

+  const isDebugDemo = debugDemos.includes(hash.slice(1));
+
  useLayoutEffect(() => {
-    setShowDebug(process.env.NODE_ENV === 'development');
+    setShowDebug(process.env.NODE_ENV === 'development' || isDebugDemo);
  }, []);

  const contextValue = useMemo<DemoContextProps>(
@@ -147,7 +149,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
          <section css={styles.tocWrapper} className={classNames({ rtl: isRTL })}>
            <Anchor css={styles.toc} affix={false} showInkInFixed>
              {anchorItems.map((item) => (
-                <Anchor.Link href={`#${item.id}`} title={item.title} key={item.id}>
+                <Anchor.Link href={`#${item.id}`} title={item?.title} key={item.id}>
                  {item.children
                    ?.filter((child) => showDebug || !debugDemos.includes(child.id))
                    .map((child) => (
@@ -157,7 +159,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
                          <span
                            className={classNames(debugDemos.includes(child.id) && 'toc-debug')}
                          >
-                            {child.title}
+                            {child?.title}
                          </span>
                        }
                        key={child.id}
@@ -170,7 +172,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
        </Affix>
        <article css={styles.articleWrapper} className={classNames({ rtl: isRTL })}>
          <Typography.Title style={{ fontSize: 30 }}>
-            {meta.frontmatter.title}
+            {meta.frontmatter?.title}
            {meta.frontmatter.subtitle && (
              <span style={{ marginLeft: 12 }}>{meta.frontmatter.subtitle}</span>
            )}
--- a/.dumi/theme/slots/Footer/AdditionalInfo.tsx
+++ b/.dumi/theme/slots/Footer/AdditionalInfo.tsx
@@ -30,20 +30,20 @@ export default function InfoNewVersion() {
    p.style.position = 'fixed';
    p.style.pointerEvents = 'none';
    p.style.visibility = 'hidden';
-    p.style.opacity = '0';
+    p.style.width = '0';
    document.body.appendChild(p);
    updateCSS(
      `
 :where(.${whereCls}) {
-  opacity: 0.3 !important;
+  width: 93px !important;
 }
    `,
      whereCls,
    );

    // Check style
-    const { opacity } = getComputedStyle(p);
-    setSupportWhere(String(opacity) === '0.3');
+    const { width } = getComputedStyle(p);
+    setSupportWhere(String(width) === '93px');

    return () => {
      document.body.removeChild(p);
--- a/.dumi/theme/slots/Header/Navigation.tsx
+++ b/.dumi/theme/slots/Header/Navigation.tsx
@@ -148,7 +148,7 @@ export default ({
          target="_blank"
          rel="noopener noreferrer"
        >
-          Github
+          GitHub
        </a>
      ),
      key: 'github',
--- a/.dumi/theme/slots/Header/SwitchBtn.tsx
+++ b/.dumi/theme/slots/Header/SwitchBtn.tsx
@@ -41,10 +41,6 @@ const useStyle = () => {

      &:hover {
        background: ${token.colorBgTextHover};
-
-        .btn-inner {
-          transform: scale(1.1);
-        }
      }

      img {
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@@ -341,7 +341,7 @@ const Header: React.FC<HeaderProps> = (props) => {
    <Popover
      key="version"
      open={!!notify}
-      title={locale.title}
+      title={locale?.title}
      content={
        <Typography style={{ marginTop: token.marginXS }}>
          {lang === 'cn' ? (
@@ -352,7 +352,7 @@ const Header: React.FC<HeaderProps> = (props) => {
                  target="_blank"
                  href="https://github.com/ant-design/ant-design/issues/38463"
                >
-                  Github Issue
+                  GitHub Issue
                </Typography.Link>{' '}
                反馈。
              </div>
@@ -366,7 +366,7 @@ const Header: React.FC<HeaderProps> = (props) => {
                  target="_blank"
                  href="https://github.com/ant-design/ant-design/issues/38463"
                >
-                  Github Issue
+                  GitHub Issue
                </Typography.Link>
                .
              </div>
@@ -383,6 +383,7 @@ const Header: React.FC<HeaderProps> = (props) => {
        defaultValue={antdVersion}
        onChange={handleVersionChange}
        dropdownStyle={getDropdownStyle}
+        dropdownMatchSelectWidth={false}
        getPopupContainer={(trigger) => trigger.parentNode}
        onClick={onClose}
      >
--- a/.dumi/theme/slots/ThemeContext.tsx
+++ b/.dumi/theme/slots/ThemeContext.tsx
@@ -1,11 +0,0 @@
-import { createContext } from 'react';
-import type { ThemeConfig } from 'antd/es/config-provider/context';
-
-export type ThemeContextProps = {
-  theme: ThemeConfig;
-  setTheme: (theme: ThemeConfig) => void;
-};
-
-const ThemeContext = createContext<ThemeContextProps>({ theme: {}, setTheme: () => {} });
-
-export default ThemeContext;
--- a/.dumi/theme/utils.tsx
+++ b/.dumi/theme/utils.tsx
@@ -41,7 +41,7 @@ export function getMenuItems(
    if (meta.type) {
      meta.type = meta.type[locale] || meta.type;
    }
-    if (meta.title) {
+    if (meta?.title) {
      meta.title = meta.title[locale] || meta.title;
    }

@@ -52,7 +52,7 @@ export function getMenuItems(

    // Component
    if (meta.category === 'Components' && meta.type) {
-      let type = menuItems.find((i) => i.title === meta.type);
+      let type = menuItems.find((i) => i?.title === meta.type);
      if (!type) {
        type = {
          type: 'type',
@@ -67,7 +67,7 @@ export function getMenuItems(
      return;
    }

-    let group = menuItems.find((i) => i.title === meta.category);
+    let group = menuItems.find((i) => i?.title === meta.category);

    if (!group) {
      group = {
@@ -82,7 +82,7 @@ export function getMenuItems(
    group.children = group.children || [];

    if (meta.type) {
-      let type = group.children.filter((i) => i.title === meta.type)[0];
+      let type = group.children.filter((i) => i?.title === meta.type)[0];
      if (!type) {
        type = {
          type: 'type',
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,26 @@ timeline: true

 ---

+## 5.0.4
+
+`2022-12-05`
+
+- Modal
+  - 🐞 Fix Modal with long content exceed the panel. [#39249](https://github.com/ant-design/ant-design/pull/39249) [@MuxinFeng](https://github.com/MuxinFeng)
+  - 🐞 Fix Modal.info content width when without icon. [#39047](https://github.com/ant-design/ant-design/pull/39047) [@owjs3901](https://github.com/owjs3901)
+- 🐞 Fix Tree config `checkable` and `blockNode` not makes `title` stretch issue. [#39209](https://github.com/ant-design/ant-design/pull/39209) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix Dropdown sub menu missing motion. [#39235](https://github.com/ant-design/ant-design/pull/39235)
+- 💄 Fix RangePicker time panel padding style. [#39228](https://github.com/ant-design/ant-design/pull/39228)
+- 🐞 Fix Card action button round style. [#39210](https://github.com/ant-design/ant-design/pull/39210) [@muxin](https://github.com/muxin)
+- 🐞 Fix Badge wave effect color not follow `color`. [#39182](https://github.com/ant-design/ant-design/pull/39182) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 Fix Radio disabled status check style. [#39165](https://github.com/ant-design/ant-design/pull/39165) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fixed TextArea count style when `resize` is not `none`. [#39121](https://github.com/ant-design/ant-design/pull/39121) [@51wangping](https://github.com/51wangping)
+- 🐞 Fix Transfer clicking the checkbox position cannot be unchecked and onSelectChange is triggered twice. [#39078](https://github.com/ant-design/ant-design/pull/39078) [@edc-hui](https://github.com/edc-hui)
+- 🐞 Fix Steps set `size="small"` with progress not fully display. [#39100](https://github.com/ant-design/ant-design/pull/39100) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix Form horizontal layout with `xs` responsive config not work. [#39130](https://github.com/ant-design/ant-design/pull/39130)
+- 🐞 Fix message position not correct in RTL. [#39248](https://github.com/ant-design/ant-design/pull/39248) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix Switch only set with `checkedChildren` or `unCheckedChildren` content not display. [#39262](https://github.com/ant-design/ant-design/pull/39262)
+
 ## 5.0.3

 `2022-11-30`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,26 @@ timeline: true

 ---

+## 5.0.4
+
+`2022-12-05`
+
+- Modal
+  - 🐞 修复 Modal 文字内容过多会超出框体的样式问题。[#39249](https://github.com/ant-design/ant-design/pull/39249) [@MuxinFeng](https://github.com/MuxinFeng)
+  - 🐞 修复 Modal.info 没有图标时，内容宽度不正确的问题。[#39047](https://github.com/ant-design/ant-design/pull/39047) [@owjs3901](https://github.com/owjs3901)
+- 🐞 修复 Tree `checkable` 与 `blockNode` 配合时，`title` 元素不拉伸的问题。[#39209](https://github.com/ant-design/ant-design/pull/39209) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Dropdown 二级菜单丢失动画的问题。[#39235](https://github.com/ant-design/ant-design/pull/39235)
+- 💄 修复 RangePicker 内时间面板的 padding 样式。[#39228](https://github.com/ant-design/ant-design/pull/39228)
+- 🐞 修复 Card 的按钮组圆角样式。[#39210](https://github.com/ant-design/ant-design/pull/39210) [@muxin](https://github.com/muxin)
+- 🐞 修复了 Badge 自定义颜色的时候，波纹的颜色不会跟着小圆点颜色发生变化的问题。[#39182](https://github.com/ant-design/ant-design/pull/39182) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 修复 Radio 禁用状态选中样式。[#39165](https://github.com/ant-design/ant-design/pull/39165) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 TextArea `resize` 不是 `none` 时计数文字的样式问题。[#39121](https://github.com/ant-design/ant-design/pull/39121) [@51wangping](https://github.com/51wangping)
+- 🐞 修复 Transfer 组件 点击复选框位置不可以取消选中，并触发了两次 onSelectChange 问题。[#39078](https://github.com/ant-design/ant-design/pull/39078) [@edc-hui](https://github.com/edc-hui)
+- 🐞 修复 Steps `size="small"` 第一项带有进度时，进度条显示不全的问题。[#39100](https://github.com/ant-design/ant-design/pull/39100) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Form 水平布局下 `xs` 的响应式布局不生效的问题。[#39130](https://github.com/ant-design/ant-design/pull/39130)
+- 🐞 修复 message 在 RTL 下位置不正确的问题。[#39248](https://github.com/ant-design/ant-design/pull/39248) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Switch 在只设置 `checkedChildren` 或 `unCheckedChildren` 时，其内容不会显示的问题。[#39262](https://github.com/ant-design/ant-design/pull/39262)
+
 ## 5.0.3

 `2022-11-30`
--- a/components/badge/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/badge/tests/snapshots/demo-extend.test.ts.snap
@@ -549,7 +549,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:#f50"
+          style="color:#f50;background:#f50"
        />
        <span
          class="ant-badge-status-text"
@@ -567,7 +567,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:rgb(45, 183, 245)"
+          style="color:rgb(45, 183, 245);background:rgb(45, 183, 245)"
        />
        <span
          class="ant-badge-status-text"
@@ -585,7 +585,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:hsl(102, 53%, 61%)"
+          style="color:hsl(102, 53%, 61%);background:hsl(102, 53%, 61%)"
        />
        <span
          class="ant-badge-status-text"
@@ -602,7 +602,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:hwb(205 6% 9%)"
+          style="color:hwb(205 6% 9%);background:hwb(205 6% 9%)"
        />
        <span
          class="ant-badge-status-text"
--- a/components/badge/tests/snapshots/demo.test.ts.snap
+++ b/components/badge/tests/snapshots/demo.test.ts.snap
@@ -549,7 +549,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:#f50"
+          style="color:#f50;background:#f50"
        />
        <span
          class="ant-badge-status-text"
@@ -567,7 +567,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:rgb(45, 183, 245)"
+          style="color:rgb(45, 183, 245);background:rgb(45, 183, 245)"
        />
        <span
          class="ant-badge-status-text"
@@ -585,7 +585,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:hsl(102, 53%, 61%)"
+          style="color:hsl(102, 53%, 61%);background:hsl(102, 53%, 61%)"
        />
        <span
          class="ant-badge-status-text"
@@ -602,7 +602,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:hwb(205 6% 9%)"
+          style="color:hwb(205 6% 9%);background:hwb(205 6% 9%)"
        />
        <span
          class="ant-badge-status-text"
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -153,6 +153,7 @@ const Badge: CompoundedComponent = ({

  const statusStyle: React.CSSProperties = {};
  if (color && !isPresetColor(color)) {
+    statusStyle.color = color;
    statusStyle.background = color;
  }

--- a/components/badge/style/index.tsx
+++ b/components/badge/style/index.tsx
@@ -185,6 +185,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
        },
        [`${componentCls}-status-processing`]: {
          position: 'relative',
+          color: token.colorPrimary,
          backgroundColor: token.colorPrimary,

          '&::after': {
@@ -193,7 +194,9 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
            insetInlineStart: 0,
            width: '100%',
            height: '100%',
-            border: `${badgeShadowSize}px solid ${token.colorPrimary}`,
+            borderWidth: badgeShadowSize,
+            borderStyle: 'solid',
+            borderColor: 'inherit',
            borderRadius: '50%',
            animationName: antStatusProcessing,
            animationDuration: token.badgeProcessingDuration,
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -19,10 +19,10 @@ export interface BreadcrumbItemProps {
  /** @deprecated Please use `menu` instead */
  overlay?: DropdownProps['overlay'];
 }
-interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
+type CompoundedComponent = React.FC<BreadcrumbItemProps> & {
  __ANT_BREADCRUMB_ITEM: boolean;
-}
-const BreadcrumbItem: BreadcrumbItemInterface = (props) => {
+};
+const BreadcrumbItem: CompoundedComponent = (props) => {
  const {
    prefixCls: customizePrefixCls,
    separator = '/',
--- a/components/breadcrumb/BreadcrumbSeparator.tsx
+++ b/components/breadcrumb/BreadcrumbSeparator.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';

-interface BreadcrumbSeparatorInterface extends React.FC<{ children?: React.ReactNode }> {
+type CompoundedComponent = React.FC<{ children?: React.ReactNode }> & {
  /** @internal */
  __ANT_BREADCRUMB_SEPARATOR: boolean;
-}
+};

-const BreadcrumbSeparator: BreadcrumbSeparatorInterface = ({ children }) => {
+const BreadcrumbSeparator: CompoundedComponent = ({ children }) => {
  const { getPrefixCls } = React.useContext(ConfigContext);
  const prefixCls = getPrefixCls('breadcrumb');

--- a/components/card/style/index.tsx
+++ b/components/card/style/index.tsx
@@ -117,6 +117,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
    background: token.colorBgContainer,
    borderTop: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`,
    display: 'flex',
+    borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px `,
    ...clearFix(),

    '& > li': {
--- a/components/checkbox/style/index.tsx
+++ b/components/checkbox/style/index.tsx
@@ -174,6 +174,16 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
          borderColor: token.colorPrimary,
        },
      },
+
+      [`${wrapperCls}:not(${wrapperCls}-disabled)`]: {
+        [`&:hover ${checkboxCls}-checked:not(${checkboxCls}-disabled) ${checkboxCls}-inner`]: {
+          backgroundColor: token.colorPrimaryHover,
+          borderColor: 'transparent',
+        },
+        [`&:hover ${checkboxCls}-checked:not(${checkboxCls}-disabled):after`]: {
+          borderColor: token.colorPrimaryHover,
+        },
+      },
    },

    // ==================== Checked ====================
@@ -183,7 +193,6 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
        [`${checkboxCls}-inner`]: {
          backgroundColor: token.colorPrimary,
          borderColor: token.colorPrimary,
-          zIndex: 2,

          '&:after': {
            opacity: 1,
@@ -195,7 +204,6 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
        // Checked Effect
        '&:after': {
          position: 'absolute',
-          zIndex: 1,
          top: 0,
          insetInlineStart: 0,
          width: '100%',
@@ -208,6 +216,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
          animationTimingFunction: 'ease-in-out',
          animationFillMode: 'backwards',
          content: '""',
+          transition: `all ${token.motionDurationSlow}`,
        },
      },

@@ -219,6 +228,9 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
          backgroundColor: token.colorPrimaryHover,
          borderColor: 'transparent',
        },
+        [`&:hover ${checkboxCls}:after`]: {
+          borderColor: token.colorPrimaryHover,
+        },
      },
    },

--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@@ -50,11 +50,11 @@ interface PanelProps {
  collapsible?: CollapsibleType;
 }

-interface CollapseInterface extends React.FC<CollapseProps> {
+type CompoundedComponent = React.FC<CollapseProps> & {
  Panel: typeof CollapsePanel;
-}
+};

-const Collapse: CollapseInterface = (props) => {
+const Collapse: CompoundedComponent = (props) => {
  const { getPrefixCls, direction } = React.useContext(ConfigContext);
  const {
    prefixCls: customizePrefixCls,
--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@@ -40280,7 +40280,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -40345,7 +40345,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -40438,7 +40438,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -40503,7 +40503,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -40596,7 +40596,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -40661,7 +40661,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -40754,7 +40754,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -40819,7 +40819,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -40912,7 +40912,7 @@ exports[`ConfigProvider components Tree configProvider virtual and dropdownMatch
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="ant-tree-indent"
@@ -40977,7 +40977,7 @@ exports[`ConfigProvider components Tree configProvider virtual and dropdownMatch
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="ant-tree-indent"
@@ -41070,7 +41070,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="ant-tree-indent"
@@ -41135,7 +41135,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="ant-tree-indent"
@@ -41228,7 +41228,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
    <div
      aria-hidden="true"
      class="prefix-Tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="prefix-Tree-indent"
@@ -41293,7 +41293,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
    <div
      aria-hidden="true"
      class="prefix-Tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="prefix-Tree-indent"
@@ -41422,7 +41422,7 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
            <div
              aria-hidden="true"
              class="config-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="config-select-tree-indent"
@@ -41620,7 +41620,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
            <div
              aria-hidden="true"
              class="config-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="config-select-tree-indent"
@@ -41757,7 +41757,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
            <div
              aria-hidden="true"
              class="config-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="config-select-tree-indent"
@@ -41894,7 +41894,7 @@ exports[`ConfigProvider components TreeSelect configProvider virtual and dropdow
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="ant-select-tree-indent"
@@ -42031,7 +42031,7 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="ant-select-tree-indent"
@@ -42168,7 +42168,7 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
            <div
              aria-hidden="true"
              class="prefix-TreeSelect-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="prefix-TreeSelect-tree-indent"
--- a/components/config-provider/demo/theme.tsx
+++ b/components/config-provider/demo/theme.tsx
@@ -23,8 +23,14 @@ export default () => {
    >
      <Form
        form={form}
-        onValuesChange={(_, nextData) => {
-          setData({ ...nextData, colorPrimary: nextData.colorPrimary.hex });
+        onValuesChange={(changedValues, allValues) => {
+          const colorObj = changedValues?.colorPrimary
+            ? { colorPrimary: allValues?.colorPrimary?.hex }
+            : {};
+          setData({
+            ...allValues,
+            ...colorObj,
+          });
        }}
        name="theme"
        initialValues={defaultData}
--- a/components/date-picker/style/index.tsx
+++ b/components/date-picker/style/index.tsx
@@ -290,6 +290,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
    pickerPanelCellWidth,
    paddingSM,
    paddingXS,
+    paddingXXS,
    colorBgContainer,
    lineWidth,
    lineType,
@@ -779,7 +780,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
        '&-column': {
          flex: '1 0 auto',
          width: pickerTimePanelColumnWidth,
-          margin: 0,
+          margin: `${paddingXXS}px 0`,
          padding: 0,
          overflowY: 'hidden',
          textAlign: 'start',
@@ -791,10 +792,6 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
            display: 'block',
            height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight,
            content: '""',
-            [`${componentCls}-datetime-panel &`]: {
-              height:
-                pickerTimePanelColumnHeight - pickerPanelWithoutTimeCellHeight + 2 * lineWidth,
-            },
          },

          '&:not(:first-child)': {
@@ -851,6 +848,10 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
          },
        },
      },
+      // https://github.com/ant-design/ant-design/issues/39227
+      [`&-datetime-panel ${componentCls}-time-panel-column:after`]: {
+        height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight + paddingXXS * 2,
+      },
    },
  };
 };
--- a/components/drawer/tests/Drawer.test.tsx
+++ b/components/drawer/tests/Drawer.test.tsx
@@ -6,6 +6,7 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
+import { resetWarned } from '../../_util/warning';

 const DrawerTest: React.FC<DrawerProps> = ({ getContainer }) => (
  <div>
@@ -208,4 +209,38 @@ describe('Drawer', () => {
      zIndex: 903,
    });
  });
+
+  describe('style migrate', () => {
+    it('not warning with getContainer', () => {
+      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      resetWarned();
+
+      render(<Drawer getContainer={() => document.body} />);
+      expect(errorSpy).not.toHaveBeenCalled();
+
+      errorSpy.mockRestore();
+    });
+
+    it('not warning with getContainer false', () => {
+      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      resetWarned();
+
+      render(<Drawer getContainer={false} />);
+      expect(errorSpy).not.toHaveBeenCalled();
+
+      errorSpy.mockRestore();
+    });
+
+    it('warning with getContainer & style', () => {
+      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      resetWarned();
+
+      render(<Drawer getContainer={false} style={{ position: 'absolute' }} />);
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: [antd: Drawer] `style` is replaced by `rootStyle` in v5. Please check that `position: absolute` is necessary.',
+      );
+
+      errorSpy.mockRestore();
+    });
+  });
 });
--- a/components/drawer/demo/render-in-current.md
+++ b/components/drawer/demo/render-in-current.md
@@ -2,10 +2,14 @@

 渲染在当前 dom 里。自定义容器，查看 `getContainer`。

+注意：在 v5 中 `style` 与 `className` 迁移至 Drawer 面板上与 Modal 保持一致，原 `style` 与 `className` 替换为 `rootStyle` 与 `rootClassName`。
+
 ## en-US

 Render in current dom. custom container, check `getContainer`.

+Note: `style` and `className` props are moved to Drawer panel in v5 which is aligned with Modal component. Original `style` and `className` props are replaced by `rootStyle` and `rootClassName`.
+
 ```css
 .site-drawer-render-in-current-wrapper {
  position: relative;
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -93,6 +93,14 @@ function Drawer(props: DrawerProps) {
        `\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`,
      );
    });
+
+    if (getContainer !== undefined && props.style?.position === 'absolute') {
+      warning(
+        false,
+        'Drawer',
+        '`style` is replaced by `rootStyle` in v5. Please check that `position: absolute` is necessary.',
+      );
+    }
  }

  // ============================ Size ============================
--- a/components/dropdown/dropdown-button.tsx
+++ b/components/dropdown/dropdown-button.tsx
@@ -28,12 +28,12 @@ export interface DropdownButtonProps extends ButtonGroupProps, DropdownProps {
  buttonsRender?: (buttons: React.ReactNode[]) => React.ReactNode[];
 }

-interface DropdownButtonInterface extends React.FC<DropdownButtonProps> {
+type CompoundedComponent = React.FC<DropdownButtonProps> & {
  /** @internal */
  __ANT_BUTTON: boolean;
-}
+};

-const DropdownButton: DropdownButtonInterface = (props) => {
+const DropdownButton: CompoundedComponent = (props) => {
  const {
    getPopupContainer: getContextPopupContainer,
    getPrefixCls,
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -82,12 +82,12 @@ export interface DropdownProps {
  onVisibleChange?: (open: boolean) => void;
 }

-interface DropdownInterface extends React.FC<DropdownProps> {
+type CompoundedComponent = React.FC<DropdownProps> & {
  Button: typeof DropdownButton;
  _InternalPanelDoNotUseOrYouWillBeFired: typeof WrapPurePanel;
-}
+};

-const Dropdown: DropdownInterface = (props) => {
+const Dropdown: CompoundedComponent = (props) => {
  const {
    getPopupContainer: getContextPopupContainer,
    getPrefixCls,
--- a/components/dropdown/style/index.tsx
+++ b/components/dropdown/style/index.tsx
@@ -2,6 +2,7 @@ import { getArrowOffset } from '../../style/placementArrow';
 import {
  initMoveMotion,
  initSlideMotion,
+  initZoomMotion,
  slideDownIn,
  slideDownOut,
  slideUpIn,
@@ -418,6 +419,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
      initSlideMotion(token, 'slide-down'),
      initMoveMotion(token, 'move-up'),
      initMoveMotion(token, 'move-down'),
+      initZoomMotion(token, 'zoom-big'),
    ],
  ];
 };
--- a/components/empty/index.tsx
+++ b/components/empty/index.tsx
@@ -25,12 +25,12 @@ export interface EmptyProps {
  children?: React.ReactNode;
 }

-interface EmptyType extends React.FC<EmptyProps> {
+type CompoundedComponent = React.FC<EmptyProps> & {
  PRESENTED_IMAGE_DEFAULT: React.ReactNode;
  PRESENTED_IMAGE_SIMPLE: React.ReactNode;
-}
+};

-const Empty: EmptyType = ({
+const Empty: CompoundedComponent = ({
  className,
  prefixCls: customizePrefixCls,
  image = defaultEmptyImg,
--- a/components/form/FormItem/index.tsx
+++ b/components/form/FormItem/index.tsx
@@ -393,11 +393,11 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea

 type InternalFormItemType = typeof InternalFormItem;

-interface FormItemInterface extends InternalFormItemType {
+type CompoundedComponent = InternalFormItemType & {
  useStatus: typeof useFormItemStatus;
-}
+};

-const FormItem = InternalFormItem as FormItemInterface;
+const FormItem = InternalFormItem as CompoundedComponent;
 FormItem.useStatus = useFormItemStatus;

 export default FormItem;
--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
@@ -2764,7 +2764,7 @@ Array [
                          <div
                            aria-hidden="true"
                            class="ant-select-tree-treenode"
-                            style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                            style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
                          >
                            <div
                              class="ant-select-tree-indent"
@@ -9875,7 +9875,7 @@ exports[`renders ./components/form/demo/size.tsx extend context correctly 1`] =
                        <div
                          aria-hidden="true"
                          class="ant-select-tree-treenode"
-                          style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                          style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
                        >
                          <div
                            class="ant-select-tree-indent"
@@ -24461,7 +24461,7 @@ exports[`renders ./components/form/demo/validate-static.tsx extend context corre
                        <div
                          aria-hidden="true"
                          class="ant-select-tree-treenode"
-                          style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                          style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
                        >
                          <div
                            class="ant-select-tree-indent"
--- a/components/form/index.tsx
+++ b/components/form/index.tsx
@@ -13,7 +13,7 @@ import useFormInstance from './hooks/useFormInstance';

 type InternalFormType = typeof InternalForm;

-interface FormInterface extends InternalFormType {
+type CompoundedComponent = InternalFormType & {
  useForm: typeof useForm;
  useFormInstance: typeof useFormInstance;
  useWatch: typeof useWatch;
@@ -24,9 +24,9 @@ interface FormInterface extends InternalFormType {

  /** @deprecated Only for warning usage. Do not use. */
  create: () => void;
-}
+};

-const Form = InternalForm as FormInterface;
+const Form = InternalForm as CompoundedComponent;

 Form.Item = Item;
 Form.List = List;
--- a/components/form/style/index.tsx
+++ b/components/form/style/index.tsx
@@ -404,9 +404,7 @@ const makeVerticalLayout = (token: FormToken): CSSObject => {
  const { componentCls, formItemCls } = token;

  return {
-    [`${formItemCls} ${formItemCls}-label`]: {
-      ...makeVerticalLayoutLabel(token),
-    },
+    [`${formItemCls} ${formItemCls}-label`]: makeVerticalLayoutLabel(token),
    [componentCls]: {
      [formItemCls]: {
        flexWrap: 'wrap',
@@ -443,40 +441,32 @@ const genVerticalStyle: GenerateStyle<FormToken> = (token) => {

    [`${componentCls}-vertical ${formItemCls}-label,
      .${rootPrefixCls}-col-24${formItemCls}-label,
-      .${rootPrefixCls}-col-xl-24${formItemCls}-label`]: {
-      ...makeVerticalLayoutLabel(token),
-    },
+      .${rootPrefixCls}-col-xl-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),

-    [`@media (max-width: ${token.screenSMMax}px)`]: {
-      ...makeVerticalLayout(token),
-      [componentCls]: {
-        [`.${rootPrefixCls}-col-xs-24${formItemCls}-label`]: {
-          ...makeVerticalLayoutLabel(token),
+    [`@media (max-width: ${token.screenXSMax}px)`]: [
+      makeVerticalLayout(token),
+      {
+        [componentCls]: {
+          [`.${rootPrefixCls}-col-xs-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
        },
      },
-    },
+    ],

    [`@media (max-width: ${token.screenSMMax}px)`]: {
      [componentCls]: {
-        [`.${rootPrefixCls}-col-sm-24${formItemCls}-label`]: {
-          ...makeVerticalLayoutLabel(token),
-        },
+        [`.${rootPrefixCls}-col-sm-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
      },
    },

    [`@media (max-width: ${token.screenMDMax}px)`]: {
      [componentCls]: {
-        [`.${rootPrefixCls}-col-md-24${formItemCls}-label`]: {
-          ...makeVerticalLayoutLabel(token),
-        },
+        [`.${rootPrefixCls}-col-md-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
      },
    },

    [`@media (max-width: ${token.screenLGMax}px)`]: {
      [componentCls]: {
-        [`.${rootPrefixCls}-col-lg-24${formItemCls}-label`]: {
-          ...makeVerticalLayoutLabel(token),
-        },
+        [`.${rootPrefixCls}-col-lg-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
      },
    },
  };
--- a/components/image/tests/image.test.ts
+++ b/components/image/tests/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Image image', () => {
+  imageDemoTest('image');
+});
--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@@ -3,7 +3,7 @@ import UpOutlined from '@ant-design/icons/UpOutlined';
 import classNames from 'classnames';
 import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
 import RcInputNumber from 'rc-input-number';
-import type { ValueType } from 'rc-input-number/lib/utils/MiniDecimal';
+import type { ValueType } from '@rc-component/mini-decimal';
 import * as React from 'react';
 import { useContext } from 'react';
 import ConfigProvider, { ConfigContext } from '../config-provider';
--- a/components/input/style/index.tsx
+++ b/components/input/style/index.tsx
@@ -904,15 +904,17 @@ const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
        },

        '&::after': {
-          position: 'absolute',
-          bottom: 0,
-          insetInlineEnd: 0,
          color: token.colorTextDescription,
          whiteSpace: 'nowrap',
          content: 'attr(data-count)',
          pointerEvents: 'none',
-          display: 'block',
-          transform: 'translateY(100%)',
+          float: 'right',
+        },
+      },
+
+      '&-rtl': {
+        '&::after': {
+          float: 'left',
        },
      },
    },
--- a/components/layout/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/layout/tests/snapshots/demo-extend.test.ts.snap
@@ -380,8 +380,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx extend context corr
    class="ant-layout site-layout"
  >
    <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
    >
      <span
        aria-label="menu-fold"
@@ -405,8 +405,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx extend context corr
      </span>
    </header>
    <main
-      class="ant-layout-content site-layout-background"
-      style="margin:24px 16px;padding:24px;min-height:280px"
+      class="ant-layout-content"
+      style="margin:24px 16px;padding:24px;min-height:280px;background:#ffffff"
    >
      Content
    </main>
@@ -423,7 +423,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
    style="position:sticky;top:0;z-index:1;width:100%"
  >
    <div
-      class="logo"
+      style="float:left;width:120px;height:31px;margin:16px 24px 16px 0;background:rgba(255, 255, 255, 0.2)"
    />
    <ul
      class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -656,7 +656,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
  </header>
  <main
    class="ant-layout-content site-layout"
-    style="padding:0 50px;margin-top:64px"
+    style="padding:0 50px"
  >
    <nav
      class="ant-breadcrumb"
@@ -702,8 +702,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
      </ol>
    </nav>
    <div
-      class="site-layout-background"
-      style="padding:24px;min-height:380px"
+      style="padding:24px;min-height:380px;background:#ffffff"
    >
      Content
    </div>
@@ -729,7 +728,7 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx extend context correct
      class="ant-layout-sider-children"
    >
      <div
-        class="logo"
+        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
      />
      <ul
        class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -1350,16 +1349,15 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx extend context correct
    style="margin-left:200px"
  >
    <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
    />
    <main
      class="ant-layout-content"
      style="margin:24px 16px 0;overflow:initial"
    >
      <div
-        class="site-layout-background"
-        style="padding:24px;text-align:center"
+        style="padding:24px;text-align:center;background:#ffffff"
      >
        <p>
          long content
@@ -1908,16 +1906,15 @@ exports[`renders ./components/layout/demo/responsive.tsx extend context correctl
    class="ant-layout"
  >
    <header
-      class="ant-layout-header site-layout-sub-header-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
    />
    <main
      class="ant-layout-content"
      style="margin:24px 16px 0"
    >
      <div
-        class="site-layout-background"
-        style="padding:24px;min-height:360px"
+        style="padding:24px;min-height:360px;background:#ffffff"
      >
        content
      </div>
@@ -1945,7 +1942,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
      class="ant-layout-sider-children"
    >
      <div
-        class="logo"
+        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
      />
      <ul
        class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -2600,8 +2597,8 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
    class="ant-layout site-layout"
  >
    <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
    />
    <main
      class="ant-layout-content"
@@ -2639,8 +2636,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
        </ol>
      </nav>
      <div
-        class="site-layout-background"
-        style="padding:24px;min-height:360px"
+        style="padding:24px;min-height:360px;background:#ffffff"
      >
        Bill is a cat.
      </div>
@@ -3615,6 +3611,7 @@ exports[`renders ./components/layout/demo/top.tsx extend context correctly 1`] =
    </nav>
    <div
      class="site-layout-content"
+      style="background:#ffffff"
    >
      Content
    </div>
@@ -3915,12 +3912,12 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
      </ol>
    </nav>
    <section
-      class="ant-layout site-layout-background"
-      style="padding:24px 0"
+      class="ant-layout"
+      style="padding:24px 0;background:#ffffff"
    >
      <aside
-        class="ant-layout-sider ant-layout-sider-dark site-layout-background"
-        style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+        class="ant-layout-sider ant-layout-sider-dark"
+        style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
      >
        <div
          class="ant-layout-sider-children"
@@ -5172,8 +5169,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
    class="ant-layout"
  >
    <aside
-      class="ant-layout-sider ant-layout-sider-dark site-layout-background"
-      style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+      class="ant-layout-sider ant-layout-sider-dark"
+      style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
    >
      <div
        class="ant-layout-sider-children"
@@ -6213,8 +6210,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
        </ol>
      </nav>
      <main
-        class="ant-layout-content site-layout-background"
-        style="padding:24px;margin:0;min-height:280px"
+        class="ant-layout-content"
+        style="padding:24px;margin:0;min-height:280px;background:#ffffff"
      >
        Content
      </main>
--- a/components/layout/tests/snapshots/demo.test.ts.snap
+++ b/components/layout/tests/snapshots/demo.test.ts.snap
@@ -247,8 +247,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx correctly 1`] = `
    class="ant-layout site-layout"
  >
    <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
    >
      <span
        aria-label="menu-fold"
@@ -272,8 +272,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx correctly 1`] = `
      </span>
    </header>
    <main
-      class="ant-layout-content site-layout-background"
-      style="margin:24px 16px;padding:24px;min-height:280px"
+      class="ant-layout-content"
+      style="margin:24px 16px;padding:24px;min-height:280px;background:#ffffff"
    >
      Content
    </main>
@@ -290,7 +290,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
    style="position:sticky;top:0;z-index:1;width:100%"
  >
    <div
-      class="logo"
+      style="float:left;width:120px;height:31px;margin:16px 24px 16px 0;background:rgba(255, 255, 255, 0.2)"
    />
    <ul
      class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -379,7 +379,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
  </header>
  <main
    class="ant-layout-content site-layout"
-    style="padding:0 50px;margin-top:64px"
+    style="padding:0 50px"
  >
    <nav
      class="ant-breadcrumb"
@@ -425,8 +425,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
      </ol>
    </nav>
    <div
-      class="site-layout-background"
-      style="padding:24px;min-height:380px"
+      style="padding:24px;min-height:380px;background:#ffffff"
    >
      Content
    </div>
@@ -452,7 +451,7 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx correctly 1`] = `
      class="ant-layout-sider-children"
    >
      <div
-        class="logo"
+        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
      />
      <ul
        class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -720,16 +719,15 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx correctly 1`] = `
    style="margin-left:200px"
  >
    <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
    />
    <main
      class="ant-layout-content"
      style="margin:24px 16px 0;overflow:initial"
    >
      <div
-        class="site-layout-background"
-        style="padding:24px;text-align:center"
+        style="padding:24px;text-align:center;background:#ffffff"
      >
        <p>
          long content
@@ -1101,16 +1099,15 @@ exports[`renders ./components/layout/demo/responsive.tsx correctly 1`] = `
    class="ant-layout"
  >
    <header
-      class="ant-layout-header site-layout-sub-header-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
    />
    <main
      class="ant-layout-content"
      style="margin:24px 16px 0"
    >
      <div
-        class="site-layout-background"
-        style="padding:24px;min-height:360px"
+        style="padding:24px;min-height:360px;background:#ffffff"
      >
        content
      </div>
@@ -1138,7 +1135,7 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
      class="ant-layout-sider-children"
    >
      <div
-        class="logo"
+        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
      />
      <ul
        class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -1356,8 +1353,8 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
    class="ant-layout site-layout"
  >
    <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
    />
    <main
      class="ant-layout-content"
@@ -1395,8 +1392,7 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
        </ol>
      </nav>
      <div
-        class="site-layout-background"
-        style="padding:24px;min-height:360px"
+        style="padding:24px;min-height:360px;background:#ffffff"
      >
        Bill is a cat.
      </div>
@@ -1699,6 +1695,7 @@ exports[`renders ./components/layout/demo/top.tsx correctly 1`] = `
    </nav>
    <div
      class="site-layout-content"
+      style="background:#ffffff"
    >
      Content
    </div>
@@ -1855,12 +1852,12 @@ exports[`renders ./components/layout/demo/top-side.tsx correctly 1`] = `
      </ol>
    </nav>
    <section
-      class="ant-layout site-layout-background"
-      style="padding:24px 0"
+      class="ant-layout"
+      style="padding:24px 0;background:#ffffff"
    >
      <aside
-        class="ant-layout-sider ant-layout-sider-dark site-layout-background"
-        style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+        class="ant-layout-sider ant-layout-sider-dark"
+        style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
      >
        <div
          class="ant-layout-sider-children"
@@ -2171,8 +2168,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
    class="ant-layout"
  >
    <aside
-      class="ant-layout-sider ant-layout-sider-dark site-layout-background"
-      style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+      class="ant-layout-sider ant-layout-sider-dark"
+      style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
    >
      <div
        class="ant-layout-sider-children"
@@ -2415,8 +2412,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
        </ol>
      </nav>
      <main
-        class="ant-layout-content site-layout-background"
-        style="padding:24px;margin:0;min-height:280px"
+        class="ant-layout-content"
+        style="padding:24px;margin:0;min-height:280px;background:#ffffff"
      >
        Content
      </main>
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@@ -15,12 +15,6 @@ Classic page layouts.
  color: #fff;
  background: #7dbcea;
 }
-[data-theme="dark"] #components-layout-demo-basic .ant-layout-header {
-  background: #6aa0c7;
-}
-[data-theme="dark"] #components-layout-demo-basic .ant-layout-footer {
-  background: #6aa0c7;
-}
 #components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
 }
@@ -29,18 +23,12 @@ Classic page layouts.
  line-height: 120px;
  background: #3ba0e9;
 }
-[data-theme="dark"] #components-layout-demo-basic .ant-layout-sider {
-  background: #3499ec;
-}
 #components-layout-demo-basic .ant-layout-content {
  min-height: 120px;
  color: #fff;
  line-height: 120px;
  background: rgba(16, 142, 233, 1);
 }
-[data-theme="dark"] #components-layout-demo-basic .ant-layout-content {
-  background: #107bcb;
-}
 #components-layout-demo-basic > .code-box-demo > .ant-layout + .ant-layout {
  margin-top: 48px;
 }
--- a/components/layout/demo/custom-trigger-debug.tsx
+++ b/components/layout/demo/custom-trigger-debug.tsx
@@ -9,7 +9,7 @@ import {
  UserOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';

 const { Header, Sider, Content } = Layout;

@@ -66,6 +66,9 @@ const items: MenuProps['items'] = [

 const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(true);
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();

  return (
    <Layout>
@@ -80,18 +83,18 @@ const App: React.FC = () => {
        />
      </Sider>
      <Layout>
-        <Header className="site-layout-background" style={{ padding: 0 }}>
+        <Header style={{ padding: 0, background: colorBgContainer }}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
        </Header>
        <Content
-          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
+            background: colorBgContainer,
          }}
        >
          Content
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -24,8 +24,4 @@ If you want to use a customized trigger, you can hide the default one by setting
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
 }
-
-#components-layout-demo-custom-trigger .site-layout .site-layout-background {
-  background: #fff;
-}
 ```
--- a/components/layout/demo/custom-trigger.tsx
+++ b/components/layout/demo/custom-trigger.tsx
@@ -6,12 +6,15 @@ import {
  UserOutlined,
  VideoCameraOutlined,
 } from '@ant-design/icons';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';

 const { Header, Sider, Content } = Layout;

 const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();

  return (
    <Layout>
@@ -41,18 +44,18 @@ const App: React.FC = () => {
        />
      </Sider>
      <Layout className="site-layout">
-        <Header className="site-layout-background" style={{ padding: 0 }}>
+        <Header style={{ padding: 0, background: colorBgContainer }}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
        </Header>
        <Content
-          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
+            background: colorBgContainer,
          }}
        >
          Content
--- a/components/layout/demo/fixed-sider.md
+++ b/components/layout/demo/fixed-sider.md
@@ -5,20 +5,3 @@
 ## en-US

 When dealing with long content, a fixed sider can provide a better user experience.
-
-```css
-#components-layout-demo-fixed-sider .logo {
-  height: 32px;
-  margin: 16px;
-  background: rgba(255, 255, 255, 0.2);
-}
-#components-layout-demo-fixed-sider .site-layout .site-layout-background {
-  background: #fff;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-layout .site-layout-background {
-    background: #141414;
-  }
-</style>
--- a/components/layout/demo/fixed-sider.tsx
+++ b/components/layout/demo/fixed-sider.tsx
@@ -10,7 +10,7 @@ import {
  VideoCameraOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';

 const { Header, Content, Footer, Sider } = Layout;

@@ -29,40 +29,46 @@ const items: MenuProps['items'] = [
  label: `nav ${index + 1}`,
 }));

-const App: React.FC = () => (
-  <Layout hasSider>
-    <Sider
-      style={{
-        overflow: 'auto',
-        height: '100vh',
-        position: 'fixed',
-        left: 0,
-        top: 0,
-        bottom: 0,
-      }}
-    >
-      <div className="logo" />
-      <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
-    </Sider>
-    <Layout className="site-layout" style={{ marginLeft: 200 }}>
-      <Header className="site-layout-background" style={{ padding: 0 }} />
-      <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
-        <div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}>
-          <p>long content</p>
-          {
-            // indicates very long content
-            Array.from({ length: 100 }, (_, index) => (
-              <React.Fragment key={index}>
-                {index % 20 === 0 && index ? 'more' : '...'}
-                <br />
-              </React.Fragment>
-            ))
-          }
-        </div>
-      </Content>
-      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
+    <Layout hasSider>
+      <Sider
+        style={{
+          overflow: 'auto',
+          height: '100vh',
+          position: 'fixed',
+          left: 0,
+          top: 0,
+          bottom: 0,
+        }}
+      >
+        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
+        <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
+      </Sider>
+      <Layout className="site-layout" style={{ marginLeft: 200 }}>
+        <Header style={{ padding: 0, background: colorBgContainer }} />
+        <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
+          <div style={{ padding: 24, textAlign: 'center', background: colorBgContainer }}>
+            <p>long content</p>
+            {
+              // indicates very long content
+              Array.from({ length: 100 }, (_, index) => (
+                <React.Fragment key={index}>
+                  {index % 20 === 0 && index ? 'more' : '...'}
+                  <br />
+                </React.Fragment>
+              ))
+            }
+          </div>
+        </Content>
+        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+      </Layout>
    </Layout>
-  </Layout>
-);
+  );
+};

 export default App;
--- a/components/layout/demo/fixed.md
+++ b/components/layout/demo/fixed.md
@@ -5,22 +5,3 @@
 ## en-US

 Fixed Header is generally used to fix the top navigation to facilitate page switching.
-
-```css
-#components-layout-demo-fixed .logo {
-  float: left;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.2);
-}
-#components-layout-demo-fixed .site-layout .site-layout-background {
-  background: #fff;
-}
-```
-
-<style>
-[data-theme="dark"] .site-layout .site-layout-background {
-  background: #141414;
-}
-</style>
--- a/components/layout/demo/fixed.tsx
+++ b/components/layout/demo/fixed.tsx
@@ -1,34 +1,46 @@
 import React from 'react';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';

 const { Header, Content, Footer } = Layout;

-const App: React.FC = () => (
-  <Layout>
-    <Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
-      <div className="logo" />
-      <Menu
-        theme="dark"
-        mode="horizontal"
-        defaultSelectedKeys={['2']}
-        items={new Array(3).fill(null).map((_, index) => ({
-          key: String(index + 1),
-          label: `nav ${index + 1}`,
-        }))}
-      />
-    </Header>
-    <Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}>
-      <Breadcrumb style={{ margin: '16px 0' }}>
-        <Breadcrumb.Item>Home</Breadcrumb.Item>
-        <Breadcrumb.Item>List</Breadcrumb.Item>
-        <Breadcrumb.Item>App</Breadcrumb.Item>
-      </Breadcrumb>
-      <div className="site-layout-background" style={{ padding: 24, minHeight: 380 }}>
-        Content
-      </div>
-    </Content>
-    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
-  </Layout>
-);
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
+    <Layout>
+      <Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
+        <div
+          style={{
+            float: 'left',
+            width: 120,
+            height: 31,
+            margin: '16px 24px 16px 0',
+            background: 'rgba(255, 255, 255, 0.2)',
+          }}
+        />
+        <Menu
+          theme="dark"
+          mode="horizontal"
+          defaultSelectedKeys={['2']}
+          items={new Array(3).fill(null).map((_, index) => ({
+            key: String(index + 1),
+            label: `nav ${index + 1}`,
+          }))}
+        />
+      </Header>
+      <Content className="site-layout" style={{ padding: '0 50px' }}>
+        <Breadcrumb style={{ margin: '16px 0' }}>
+          <Breadcrumb.Item>Home</Breadcrumb.Item>
+          <Breadcrumb.Item>List</Breadcrumb.Item>
+          <Breadcrumb.Item>App</Breadcrumb.Item>
+        </Breadcrumb>
+        <div style={{ padding: 24, minHeight: 380, background: colorBgContainer }}>Content</div>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+    </Layout>
+  );
+};

 export default App;
--- a/components/layout/demo/responsive.md
+++ b/components/layout/demo/responsive.md
@@ -16,18 +16,4 @@ Layout.Sider supports responsive layout.
  margin: 16px;
  background: rgba(255, 255, 255, 0.2);
 }
-
-#components-layout-demo-responsive .site-layout-sub-header-background {
-  background: #fff;
-}
-
-#components-layout-demo-responsive .site-layout-background {
-  background: #fff;
-}
 ```
-
-<style>
-  [data-theme="dark"] .site-layout-sub-header-background {
-    background: #141414;
-  }
-</style>
--- a/components/layout/demo/responsive.tsx
+++ b/components/layout/demo/responsive.tsx
@@ -1,45 +1,49 @@
 import React from 'react';
 import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';

 const { Header, Content, Footer, Sider } = Layout;

-const App: React.FC = () => (
-  <Layout>
-    <Sider
-      breakpoint="lg"
-      collapsedWidth="0"
-      onBreakpoint={(broken) => {
-        console.log(broken);
-      }}
-      onCollapse={(collapsed, type) => {
-        console.log(collapsed, type);
-      }}
-    >
-      <div className="logo" />
-      <Menu
-        theme="dark"
-        mode="inline"
-        defaultSelectedKeys={['4']}
-        items={[UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(
-          (icon, index) => ({
-            key: String(index + 1),
-            icon: React.createElement(icon),
-            label: `nav ${index + 1}`,
-          }),
-        )}
-      />
-    </Sider>
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
    <Layout>
-      <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
-      <Content style={{ margin: '24px 16px 0' }}>
-        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
-          content
-        </div>
-      </Content>
-      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+      <Sider
+        breakpoint="lg"
+        collapsedWidth="0"
+        onBreakpoint={(broken) => {
+          console.log(broken);
+        }}
+        onCollapse={(collapsed, type) => {
+          console.log(collapsed, type);
+        }}
+      >
+        <div className="logo" />
+        <Menu
+          theme="dark"
+          mode="inline"
+          defaultSelectedKeys={['4']}
+          items={[UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(
+            (icon, index) => ({
+              key: String(index + 1),
+              icon: React.createElement(icon),
+              label: `nav ${index + 1}`,
+            }),
+          )}
+        />
+      </Sider>
+      <Layout>
+        <Header style={{ padding: 0, background: colorBgContainer }} />
+        <Content style={{ margin: '24px 16px 0' }}>
+          <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>content</div>
+        </Content>
+        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+      </Layout>
    </Layout>
-  </Layout>
-);
+  );
+};

 export default App;
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -13,21 +13,3 @@ Two-columns layout. The sider menu can be collapsed when horizontal space is lim
 Generally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable.

 The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents.
-
-```css
-#components-layout-demo-side .logo {
-  height: 32px;
-  margin: 16px;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-#components-layout-demo-side .site-layout .site-layout-background {
-  background: #fff;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-layout .site-layout-background {
-    background: #141414;
-  }
-</style>
--- a/components/layout/demo/side.tsx
+++ b/components/layout/demo/side.tsx
@@ -7,7 +7,7 @@ import {
  UserOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';

 const { Header, Content, Footer, Sider } = Layout;

@@ -41,21 +41,24 @@ const items: MenuItem[] = [

 const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
-        <div className="logo" />
+        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
      </Sider>
      <Layout className="site-layout">
-        <Header className="site-layout-background" style={{ padding: 0 }} />
+        <Header style={{ padding: 0, background: colorBgContainer }} />
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
-          <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
+          <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
            Bill is a cat.
          </div>
        </Content>
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -19,8 +19,4 @@ Both the top navigation and the sidebar, commonly used in application site.
  float: right;
  margin: 16px 0 16px 24px;
 }
-
-#components-layout-demo-top-side-2 .site-layout-background {
-  background: #fff;
-}
 ```
--- a/components/layout/demo/top-side-2.tsx
+++ b/components/layout/demo/top-side-2.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';

 const { Header, Content, Sider } = Layout;

@@ -30,41 +30,47 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
  },
 );

-const App: React.FC = () => (
-  <Layout>
-    <Header className="header">
-      <div className="logo" />
-      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
-    </Header>
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
    <Layout>
-      <Sider width={200} className="site-layout-background">
-        <Menu
-          mode="inline"
-          defaultSelectedKeys={['1']}
-          defaultOpenKeys={['sub1']}
-          style={{ height: '100%', borderRight: 0 }}
-          items={items2}
-        />
-      </Sider>
-      <Layout style={{ padding: '0 24px 24px' }}>
-        <Breadcrumb style={{ margin: '16px 0' }}>
-          <Breadcrumb.Item>Home</Breadcrumb.Item>
-          <Breadcrumb.Item>List</Breadcrumb.Item>
-          <Breadcrumb.Item>App</Breadcrumb.Item>
-        </Breadcrumb>
-        <Content
-          className="site-layout-background"
-          style={{
-            padding: 24,
-            margin: 0,
-            minHeight: 280,
-          }}
-        >
-          Content
-        </Content>
+      <Header className="header">
+        <div className="logo" />
+        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
+      </Header>
+      <Layout>
+        <Sider width={200} style={{ background: colorBgContainer }}>
+          <Menu
+            mode="inline"
+            defaultSelectedKeys={['1']}
+            defaultOpenKeys={['sub1']}
+            style={{ height: '100%', borderRight: 0 }}
+            items={items2}
+          />
+        </Sider>
+        <Layout style={{ padding: '0 24px 24px' }}>
+          <Breadcrumb style={{ margin: '16px 0' }}>
+            <Breadcrumb.Item>Home</Breadcrumb.Item>
+            <Breadcrumb.Item>List</Breadcrumb.Item>
+            <Breadcrumb.Item>App</Breadcrumb.Item>
+          </Breadcrumb>
+          <Content
+            style={{
+              padding: 24,
+              margin: 0,
+              minHeight: 280,
+              background: colorBgContainer,
+            }}
+          >
+            Content
+          </Content>
+        </Layout>
      </Layout>
    </Layout>
-  </Layout>
-);
+  );
+};

 export default App;
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -19,8 +19,4 @@ Both the top navigation and the sidebar, commonly used in documentation site.
  float: right;
  margin: 16px 0 16px 24px;
 }
-
-#components-layout-demo-top-side .site-layout-background {
-  background: #fff;
-}
 ```
--- a/components/layout/demo/top-side.tsx
+++ b/components/layout/demo/top-side.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';

 const { Header, Content, Footer, Sider } = Layout;

@@ -30,33 +30,39 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
  },
 );

-const App: React.FC = () => (
-  <Layout>
-    <Header className="header">
-      <div className="logo" />
-      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
-    </Header>
-    <Content style={{ padding: '0 50px' }}>
-      <Breadcrumb style={{ margin: '16px 0' }}>
-        <Breadcrumb.Item>Home</Breadcrumb.Item>
-        <Breadcrumb.Item>List</Breadcrumb.Item>
-        <Breadcrumb.Item>App</Breadcrumb.Item>
-      </Breadcrumb>
-      <Layout className="site-layout-background" style={{ padding: '24px 0' }}>
-        <Sider className="site-layout-background" width={200}>
-          <Menu
-            mode="inline"
-            defaultSelectedKeys={['1']}
-            defaultOpenKeys={['sub1']}
-            style={{ height: '100%' }}
-            items={items2}
-          />
-        </Sider>
-        <Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content>
-      </Layout>
-    </Content>
-    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
-  </Layout>
-);
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
+    <Layout>
+      <Header className="header">
+        <div className="logo" />
+        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
+      </Header>
+      <Content style={{ padding: '0 50px' }}>
+        <Breadcrumb style={{ margin: '16px 0' }}>
+          <Breadcrumb.Item>Home</Breadcrumb.Item>
+          <Breadcrumb.Item>List</Breadcrumb.Item>
+          <Breadcrumb.Item>App</Breadcrumb.Item>
+        </Breadcrumb>
+        <Layout style={{ padding: '24px 0', background: colorBgContainer }}>
+          <Sider style={{ background: colorBgContainer }} width={200}>
+            <Menu
+              mode="inline"
+              defaultSelectedKeys={['1']}
+              defaultOpenKeys={['sub1']}
+              style={{ height: '100%' }}
+              items={items2}
+            />
+          </Sider>
+          <Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content>
+        </Layout>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+    </Layout>
+  );
+};

 export default App;
--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@@ -16,7 +16,6 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
 .site-layout-content {
  min-height: 280px;
  padding: 24px;
-  background: #fff;
 }
 #components-layout-demo-top .logo {
  float: left;
@@ -30,9 +29,3 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
  margin: 16px 0 16px 24px;
 }
 ```
-
-<style>
-  [data-theme="dark"] .site-layout-content {
-    background: #141414;
-  }
-</style>
--- a/components/layout/demo/top.tsx
+++ b/components/layout/demo/top.tsx
@@ -1,35 +1,43 @@
 import React from 'react';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';

 const { Header, Content, Footer } = Layout;

-const App: React.FC = () => (
-  <Layout className="layout">
-    <Header>
-      <div className="logo" />
-      <Menu
-        theme="dark"
-        mode="horizontal"
-        defaultSelectedKeys={['2']}
-        items={new Array(15).fill(null).map((_, index) => {
-          const key = index + 1;
-          return {
-            key,
-            label: `nav ${key}`,
-          };
-        })}
-      />
-    </Header>
-    <Content style={{ padding: '0 50px' }}>
-      <Breadcrumb style={{ margin: '16px 0' }}>
-        <Breadcrumb.Item>Home</Breadcrumb.Item>
-        <Breadcrumb.Item>List</Breadcrumb.Item>
-        <Breadcrumb.Item>App</Breadcrumb.Item>
-      </Breadcrumb>
-      <div className="site-layout-content">Content</div>
-    </Content>
-    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
-  </Layout>
-);
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
+    <Layout className="layout">
+      <Header>
+        <div className="logo" />
+        <Menu
+          theme="dark"
+          mode="horizontal"
+          defaultSelectedKeys={['2']}
+          items={new Array(15).fill(null).map((_, index) => {
+            const key = index + 1;
+            return {
+              key,
+              label: `nav ${key}`,
+            };
+          })}
+        />
+      </Header>
+      <Content style={{ padding: '0 50px' }}>
+        <Breadcrumb style={{ margin: '16px 0' }}>
+          <Breadcrumb.Item>Home</Breadcrumb.Item>
+          <Breadcrumb.Item>List</Breadcrumb.Item>
+          <Breadcrumb.Item>App</Breadcrumb.Item>
+        </Breadcrumb>
+        <div className="site-layout-content" style={{ background: colorBgContainer }}>
+          Content
+        </div>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+    </Layout>
+  );
+};

 export default App;
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@@ -126,12 +126,3 @@ The sidebar.
  xxl: '1600px',
 }
 ```
-
-<style>
-  [data-theme="dark"] .site-layout-background {
-    background: #141414;
-  }
-  [data-theme="dark"] .site-layout-header-background {
-    background: #1f1f1f;
-  }
-</style>
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@@ -127,12 +127,3 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAA
  xxl: '1600px',
 }
 ```
-
-<style>
-  [data-theme="dark"] .site-layout-background {
-    background: #141414;
-  }
-  [data-theme="dark"] .site-layout-header-background {
-    background: #1f1f1f;
-  }
-</style>
--- a/components/message/style/index.tsx
+++ b/components/message/style/index.tsx
@@ -71,7 +71,6 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
        ...resetComponent(token),
        position: 'fixed',
        top: marginXS,
-        insetInlineStart: 0, // affected by ltr or rtl
        width: '100%',
        pointerEvents: 'none',
        zIndex: zIndexPopup,
--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@@ -297,6 +297,8 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {

          [`+ ${confirmComponentCls}-content`]: {
            marginBlockStart: token.marginXS,
+            flexBasis: '100%',
+            maxWidth: `calc(100% - ${token.modalConfirmIconSize + token.marginSM}px)`,
          },
        },

@@ -317,7 +319,6 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
          // `content` after `icon` should set marginLeft
          [`+ ${confirmComponentCls}-title + ${confirmComponentCls}-content`]: {
            marginInlineStart: token.modalConfirmIconSize + token.marginSM,
-            flexBasis: '100%',
          },
        },
      },
--- a/components/overview/index.zh-CN.md
+++ b/components/overview/index.zh-CN.md
@@ -3,6 +3,6 @@ category: Components
 title: 组件总览
 ---

-`antd` 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了[社区精选组件](/docs/react/recommendation)作为必要的补充，另外如果您是内网用户，欢迎尝试使用 [TechUI](https://techui.alipay.com)。
+`antd` 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了[社区精选组件](/docs/react/recommendation-cn)作为必要的补充，另外如果您是内网用户，欢迎尝试使用 [TechUI](https://techui.alipay.com)。

 <ComponentOverview></ComponentOverview>
--- a/components/pagination/Select.tsx
+++ b/components/pagination/Select.tsx
@@ -2,12 +2,12 @@ import * as React from 'react';
 import type { SelectProps } from '../select';
 import Select from '../select';

-interface MiniOrMiddleSelectInterface extends React.FC<SelectProps> {
+type CompoundedComponent = React.FC<SelectProps> & {
  Option: typeof Select.Option;
-}
+};

-const MiniSelect: MiniOrMiddleSelectInterface = (props) => <Select {...props} size="small" />;
-const MiddleSelect: MiniOrMiddleSelectInterface = (props) => <Select {...props} size="middle" />;
+const MiniSelect: CompoundedComponent = (props) => <Select {...props} size="small" />;
+const MiddleSelect: CompoundedComponent = (props) => <Select {...props} size="middle" />;

 MiniSelect.Option = Select.Option;
 MiddleSelect.Option = Select.Option;
--- a/components/radio/style/index.tsx
+++ b/components/radio/style/index.tsx
@@ -484,7 +484,7 @@ export default genComponentStyleHook('Radio', (token) => {
  const {
    padding,
    lineWidth,
-    colorBgContainerDisabled,
+    controlItemBgActiveDisabled,
    colorTextDisabled,
    colorBgContainer,
    fontSize,
@@ -535,7 +535,7 @@ export default genComponentStyleHook('Radio', (token) => {
    radioButtonHoverColor,
    radioButtonActiveColor,
    radioButtonPaddingHorizontal,
-    radioDisabledButtonCheckedBg: colorBgContainerDisabled,
+    radioDisabledButtonCheckedBg: controlItemBgActiveDisabled,
    radioDisabledButtonCheckedColor,
    radioWrapperMarginRight,
  });
--- a/components/select/demo/optgroup.tsx
+++ b/components/select/demo/optgroup.tsx
@@ -1,22 +1,29 @@
 import React from 'react';
 import { Select } from 'antd';

-const { Option, OptGroup } = Select;
-
 const handleChange = (value: string) => {
  console.log(`selected ${value}`);
 };

 const App: React.FC = () => (
-  <Select defaultValue="lucy" style={{ width: 200 }} onChange={handleChange}>
-    <OptGroup label="Manager">
-      <Option value="jack">Jack</Option>
-      <Option value="lucy">Lucy</Option>
-    </OptGroup>
-    <OptGroup label="Engineer">
-      <Option value="Yiminghe">yiminghe</Option>
-    </OptGroup>
-  </Select>
+  <Select
+    defaultValue="lucy"
+    style={{ width: 200 }}
+    onChange={handleChange}
+    options={[
+      {
+        label: 'Manager',
+        options: [
+          { label: 'Jack', value: 'jack' },
+          { label: 'Lucy', value: 'lucy' },
+        ],
+      },
+      {
+        label: 'Engineer',
+        options: [{ label: 'yiminghe', value: 'Yiminghe' }],
+      },
+    ]}
+  />
 );

 export default App;
--- a/components/skeleton/Skeleton.tsx
+++ b/components/skeleton/Skeleton.tsx
@@ -16,7 +16,7 @@ import Title from './Title';
 import useStyle from './style';

 /* This only for skeleton internal. */
-interface SkeletonAvatarProps extends Omit<AvatarProps, 'active'> {}
+type SkeletonAvatarProps = Omit<AvatarProps, 'active'>;

 export interface SkeletonProps {
  active?: boolean;
--- a/components/space/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/space/tests/snapshots/demo-extend.test.ts.snap
@@ -7973,7 +7973,7 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
                <div
                  aria-hidden="true"
                  class="ant-select-tree-treenode"
-                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
                >
                  <div
                    class="ant-select-tree-indent"
--- a/components/statistic/Countdown.tsx
+++ b/components/statistic/Countdown.tsx
@@ -8,7 +8,7 @@ import { formatCountdown } from './utils';

 const REFRESH_INTERVAL = 1000 / 30;

-interface CountdownProps extends StatisticProps {
+export interface CountdownProps extends StatisticProps {
  value?: countdownValueType;
  format?: string;
  onFinish?: () => void;
--- a/components/statistic/Statistic.tsx
+++ b/components/statistic/Statistic.tsx
@@ -10,9 +10,9 @@ import type { FormatConfig, valueType } from './utils';

 import useStyle from './style';

-interface StatisticComponent {
+type CompoundedComponent = {
  Countdown: typeof Countdown;
-}
+};

 export interface StatisticProps extends FormatConfig {
  prefixCls?: string;
@@ -81,6 +81,6 @@ const Statistic: React.FC<StatisticProps & ConfigConsumerProps> = (props) => {

 const WrapperStatistic = withConfigConsumer<StatisticProps>({
  prefixCls: 'statistic',
-})<StatisticComponent>(Statistic);
+})<CompoundedComponent>(Statistic);

 export default WrapperStatistic;
--- a/components/steps/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/steps/tests/snapshots/demo-extend.test.ts.snap
@@ -2989,62 +2989,67 @@ exports[`renders ./components/steps/demo/progress.tsx extend context correctly 1

 exports[`renders ./components/steps/demo/progress-debug.tsx extend context correctly 1`] = `
 Array [
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
+  <div
+    class="ant-space-compact ant-space-compact-block"
  >
-    <span>
-      Percentage to undefined
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Percentage +
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Current +
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Wait
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Process
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Finish
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Error
-    </span>
-  </button>,
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+      type="button"
+    >
+      <span>
+        Percentage to undefined
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Percentage +
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Current +
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Wait
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Process
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Finish
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-last-item"
+      type="button"
+    >
+      <span>
+        Status Error
+      </span>
+    </button>
+  </div>,
+  <br />,
  <div
    class="ant-steps ant-steps-horizontal ant-steps-with-progress ant-steps-label-horizontal"
  >
--- a/components/steps/tests/snapshots/demo.test.ts.snap
+++ b/components/steps/tests/snapshots/demo.test.ts.snap
@@ -2557,62 +2557,67 @@ exports[`renders ./components/steps/demo/progress.tsx correctly 1`] = `

 exports[`renders ./components/steps/demo/progress-debug.tsx correctly 1`] = `
 Array [
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
+  <div
+    class="ant-space-compact ant-space-compact-block"
  >
-    <span>
-      Percentage to undefined
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Percentage +
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Current +
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Wait
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Process
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Finish
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Error
-    </span>
-  </button>,
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+      type="button"
+    >
+      <span>
+        Percentage to undefined
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Percentage +
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Current +
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Wait
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Process
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Finish
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-last-item"
+      type="button"
+    >
+      <span>
+        Status Error
+      </span>
+    </button>
+  </div>,
+  <br />,
  <div
    class="ant-steps ant-steps-horizontal ant-steps-with-progress ant-steps-label-horizontal"
  >
--- a/components/steps/demo/progress-debug.tsx
+++ b/components/steps/demo/progress-debug.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import type { StepsProps } from 'antd';
-import { Button, Steps } from 'antd';
+import { Button, Steps, Space } from 'antd';

 const App: React.FC = () => {
-  const [percent, setPercentage] = useState(0);
+  const [percent, setPercentage] = useState<number | undefined>(0);
  const [current, setCurrent] = useState(1);
  const [status, setStatus] = useState<StepsProps['status']>('process');
  const description = 'This is a description.';
@@ -24,20 +24,18 @@ const App: React.FC = () => {
  ];
  return (
    <>
-      <Button onClick={() => setPercentage(0)}>Percentage to undefined</Button>
-      <Button onClick={() => setPercentage((percent + 10) % 100)}>Percentage +</Button>
-      <Button
-        onClick={() => {
-          setCurrent((current + 1) % 3);
-          setPercentage(0);
-        }}
-      >
-        Current +
-      </Button>
-      <Button onClick={() => setStatus('wait')}>Status Wait</Button>
-      <Button onClick={() => setStatus('process')}>Status Process</Button>
-      <Button onClick={() => setStatus('finish')}>Status Finish</Button>
-      <Button onClick={() => setStatus('error')}>Status Error</Button>
+      <Space.Compact block>
+        <Button onClick={() => setPercentage(undefined)}>Percentage to undefined</Button>
+        <Button onClick={() => setPercentage((prev) => ((prev ?? 0) + 10) % 100)}>
+          Percentage +
+        </Button>
+        <Button onClick={() => setCurrent((prev) => (prev + 1) % 3)}>Current +</Button>
+        <Button onClick={() => setStatus('wait')}>Status Wait</Button>
+        <Button onClick={() => setStatus('process')}>Status Process</Button>
+        <Button onClick={() => setStatus('finish')}>Status Finish</Button>
+        <Button onClick={() => setStatus('error')}>Status Error</Button>
+      </Space.Compact>
+      <br />
      <Steps current={current} percent={percent} status={status} items={items} />
      <Steps current={current} percent={percent} status={status} size="small" items={items} />
      <Steps
--- a/components/steps/style/progress.ts
+++ b/components/steps/style/progress.ts
@@ -16,18 +16,26 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
          },
      },

-      [`&${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
-        {
+      [`&${componentCls}-vertical > ${componentCls}-item `]: {
+        paddingInlineStart: token.paddingXXS,
+        [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
          top: token.marginXXS,
+          insetInlineStart: token.stepsIconSize / 2 - token.lineWidth + token.paddingXXS,
        },
+      },

-      [`&${componentCls}-horizontal`]: {
-        [`${componentCls}-item:first-child`]: {
+      [`&, &${componentCls}-small`]: {
+        [`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
          paddingBottom: token.paddingXXS,
          paddingInlineStart: token.paddingXXS,
        },
      },

+      [`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
+        {
+          insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth + token.paddingXXS,
+        },
+
      [`&${componentCls}-label-vertical`]: {
        [`${componentCls}-item ${componentCls}-item-tail`]: {
          top: token.margin - 2 * token.lineWidth,
--- a/components/switch/style/index.tsx
+++ b/components/switch/style/index.tsx
@@ -182,6 +182,7 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
        display: 'block',
        overflow: 'hidden',
        borderRadius: 100,
+        height: '100%',

        [`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: {
          display: 'block',
--- a/components/table/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/table/tests/snapshots/demo-extend.test.ts.snap
@@ -7131,7 +7131,7 @@ exports[`renders ./components/table/demo/filter-in-tree.tsx extend context corre
                                <div
                                  aria-hidden="true"
                                  class="ant-tree-treenode"
-                                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
                                >
                                  <div
                                    class="ant-tree-indent"
@@ -8127,7 +8127,7 @@ exports[`renders ./components/table/demo/filter-search.tsx extend context correc
                                <div
                                  aria-hidden="true"
                                  class="ant-tree-treenode"
-                                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
                                >
                                  <div
                                    class="ant-tree-indent"
--- a/components/table/demo/drag-sorting.md
+++ b/components/table/demo/drag-sorting.md
@@ -7,11 +7,11 @@
 By using `components`, we can integrate table with [react-dnd](https://github.com/react-dnd/react-dnd) to implement drag sorting function.

 ```css
-#components-table-demo-drag-sorting tr.drop-over-downward td {
+#components-table-demo-drag-sorting .ant-table tr.drop-over-downward td {
  border-bottom: 2px dashed #1890ff;
 }

-#components-table-demo-drag-sorting tr.drop-over-upward td {
+#components-table-demo-drag-sorting .ant-table tr.drop-over-upward td {
  border-top: 2px dashed #1890ff;
 }
 ```
--- a/components/theme/interface/alias.ts
+++ b/components/theme/interface/alias.ts
@@ -166,7 +166,6 @@ export interface AliasToken extends MapToken {
  screenXLMax: number;
  screenXXL: number;
  screenXXLMin: number;
-  screenXXLMax: number;

  /** Used for DefaultButton, Switch which has default outline */
  controlTmpOutline: string;
--- a/components/theme/util/alias.ts
+++ b/components/theme/util/alias.ts
@@ -158,22 +158,21 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken

    screenXS,
    screenXSMin: screenXS,
-    screenXSMax: screenXS - 1,
+    screenXSMax: screenSM - 1,
    screenSM,
    screenSMMin: screenSM,
-    screenSMMax: screenSM - 1,
+    screenSMMax: screenMD - 1,
    screenMD,
    screenMDMin: screenMD,
-    screenMDMax: screenMD - 1,
+    screenMDMax: screenLG - 1,
    screenLG,
    screenLGMin: screenLG,
-    screenLGMax: screenLG - 1,
+    screenLGMax: screenXL - 1,
    screenXL,
    screenXLMin: screenXL,
-    screenXLMax: screenXL - 1,
+    screenXLMax: screenXXL - 1,
    screenXXL,
    screenXXLMin: screenXXL,
-    screenXXLMax: screenXXL - 1,

    // FIXME: component box-shadow, should be removed
    boxShadowPopoverArrow: `3px 3px 7px rgba(0, 0, 0, 0.1)`,
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@@ -11,8 +11,6 @@ To select/input a time.

 ## When To Use

---
-
 By clicking the input box, you can select a time from a popup panel.

 ## Examples
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@@ -12,8 +12,6 @@ demo:

 ## 何时使用

---
-
 当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。

 ## 代码演示
--- a/components/transfer/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/transfer/tests/snapshots/demo-extend.test.ts.snap
@@ -7788,7 +7788,7 @@ exports[`renders ./components/transfer/demo/tree-transfer.tsx extend context cor
          <div
            aria-hidden="true"
            class="ant-tree-treenode"
-            style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+            style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
          >
            <div
              class="ant-tree-indent"
--- a/components/transfer/tests/snapshots/demo.test.ts.snap
+++ b/components/transfer/tests/snapshots/demo.test.ts.snap
@@ -5153,7 +5153,7 @@ exports[`renders ./components/transfer/demo/tree-transfer.tsx correctly 1`] = `
          <div
            aria-hidden="true"
            class="ant-tree-treenode"
-            style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+            style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
          >
            <div
              class="ant-tree-indent"
--- a/components/tree-select/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/tree-select/tests/snapshots/demo-extend.test.ts.snap
@@ -54,7 +54,7 @@ exports[`renders ./components/tree-select/demo/async.tsx extend context correctl
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
            >
              <div
                class="ant-select-tree-indent"
@@ -275,7 +275,7 @@ exports[`renders ./components/tree-select/demo/basic.tsx extend context correctl
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
            >
              <div
                class="ant-select-tree-indent"
@@ -672,7 +672,7 @@ exports[`renders ./components/tree-select/demo/checkable.tsx extend context corr
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
            >
              <div
                class="ant-select-tree-indent"
@@ -876,7 +876,7 @@ exports[`renders ./components/tree-select/demo/multiple.tsx extend context corre
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
            >
              <div
                class="ant-select-tree-indent"
@@ -1276,7 +1276,7 @@ Array [
              <div
                aria-hidden="true"
                class="ant-select-tree-treenode"
-                style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
              >
                <div
                  class="ant-select-tree-indent"
@@ -1628,7 +1628,7 @@ exports[`renders ./components/tree-select/demo/render-panel.tsx extend context c
              <div
                aria-hidden="true"
                class="ant-select-tree-treenode"
-                style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
              >
                <div
                  class="ant-select-tree-indent"
@@ -2047,7 +2047,7 @@ exports[`renders ./components/tree-select/demo/suffix.tsx extend context correct
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
            >
              <div
                class="ant-select-tree-indent"
@@ -2393,7 +2393,7 @@ exports[`renders ./components/tree-select/demo/treeData.tsx extend context corre
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
            >
              <div
                class="ant-select-tree-indent"
@@ -2690,7 +2690,7 @@ exports[`renders ./components/tree-select/demo/treeLine.tsx extend context corre
                <div
                  aria-hidden="true"
                  class="ant-select-tree-treenode"
-                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
                >
                  <div
                    class="ant-select-tree-indent"
--- a/components/tree-select/tests/snapshots/index.test.tsx.snap
+++ b/components/tree-select/tests/snapshots/index.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`TreeSelect TreeSelect Custom Icons should \`treeIcon\` work 1`] = `
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="ant-select-tree-indent"
--- a/components/tree/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/tree/tests/snapshots/demo-extend.test.ts.snap
@@ -16,7 +16,7 @@ exports[`renders ./components/tree/demo/basic.tsx extend context correctly 1`] =
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -334,7 +334,7 @@ exports[`renders ./components/tree/demo/basic-controlled.tsx extend context corr
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -873,7 +873,7 @@ exports[`renders ./components/tree/demo/customized-icon.tsx extend context corre
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -1084,7 +1084,7 @@ exports[`renders ./components/tree/demo/directory.tsx extend context correctly 1
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -1533,7 +1533,7 @@ Array [
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
    >
      <div
        class="ant-tree-indent"
@@ -2345,7 +2345,7 @@ exports[`renders ./components/tree/demo/draggable.tsx extend context correctly 1
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -2917,7 +2917,7 @@ exports[`renders ./components/tree/demo/dynamic.tsx extend context correctly 1`]
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -3282,7 +3282,7 @@ exports[`renders ./components/tree/demo/line.tsx extend context correctly 1`] =
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
    >
      <div
        class="ant-tree-indent"
@@ -3769,7 +3769,7 @@ exports[`renders ./components/tree/demo/search.tsx extend context correctly 1`]
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
    >
      <div
        class="ant-tree-indent"
@@ -3939,7 +3939,7 @@ exports[`renders ./components/tree/demo/switcher-icon.tsx extend context correct
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
--- a/components/tree/tests/snapshots/demo.test.ts.snap
+++ b/components/tree/tests/snapshots/demo.test.ts.snap
@@ -16,7 +16,7 @@ exports[`renders ./components/tree/demo/basic.tsx correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -334,7 +334,7 @@ exports[`renders ./components/tree/demo/basic-controlled.tsx correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -873,7 +873,7 @@ exports[`renders ./components/tree/demo/customized-icon.tsx correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -1084,7 +1084,7 @@ exports[`renders ./components/tree/demo/directory.tsx correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -1533,7 +1533,7 @@ Array [
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
    >
      <div
        class="ant-tree-indent"
@@ -2345,7 +2345,7 @@ exports[`renders ./components/tree/demo/draggable.tsx correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -2917,7 +2917,7 @@ exports[`renders ./components/tree/demo/dynamic.tsx correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -3183,7 +3183,7 @@ exports[`renders ./components/tree/demo/line.tsx correctly 1`] = `
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
    >
      <div
        class="ant-tree-indent"
@@ -3670,7 +3670,7 @@ exports[`renders ./components/tree/demo/search.tsx correctly 1`] = `
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
    >
      <div
        class="ant-tree-indent"
@@ -3840,7 +3840,7 @@ exports[`renders ./components/tree/demo/switcher-icon.tsx correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
--- a/components/tree/tests/snapshots/directory.test.tsx.snap
+++ b/components/tree/tests/snapshots/directory.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`Directory Tree DirectoryTree should expend all when use treeData and de
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -250,7 +250,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -627,7 +627,7 @@ exports[`Directory Tree defaultExpandParent 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -804,7 +804,7 @@ exports[`Directory Tree expand with state control click 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -965,7 +965,7 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -1126,7 +1126,7 @@ exports[`Directory Tree expandedKeys update 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -1403,7 +1403,7 @@ exports[`Directory Tree group select 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -1780,7 +1780,7 @@ exports[`Directory Tree group select 2`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -2157,7 +2157,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -2201,7 +2201,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -2245,7 +2245,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
二货爱吃白萝卜	1f8c0476d2	docs: 5.0.4 changelog (#39256 ) * docs: 5.0.4 changelog * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 <afc163@gmail.com> * docs: adjust changelog & tree style * docs: update desc * docs: add missing one * chore: adjust tree style * docs: add more Co-authored-by: afc163 <afc163@gmail.com>	2022-12-05 15:17:58 +08:00
Dunqing	93c141675a	fix(switch): only one of the two props `checkedChildren` or `unCheckedChildren` will not work (#39262 )	2022-12-05 15:03:59 +08:00
MadCcc	fbab5df655	docs: update Layout demo (#39255 ) * docs: update Layout demo * chore: code clean * chore: update snapshot	2022-12-05 14:06:42 +08:00
afc163	7b92c1ab13	test: fix argo-ci skipped demo (#39245 ) * test: fix image test cases * test: wrong skip for image test cases * chore: fix skipped demo * Apply suggestions from code review * Update components/steps/__tests__/image.test.ts	2022-12-05 12:14:05 +08:00
JiaQi	506c4005a2	fix(Message): fix message RTL display location error (#39248 )	2022-12-05 12:05:46 +08:00
afc163	e975e5d41d	chore: update tree snapshot (#39242 ) * chore: update tree snapshot * chore: bump rc-util Co-authored-by: 二货机器人 <smith3816@gmail.com>	2022-12-05 11:35:37 +08:00
littleforest	e35c05d32c	chore: fix npm start in window (#39252 ) * Feat: Added instructions for the win environment~ * feat: Use cross-env to set the environment variables	2022-12-05 11:18:41 +08:00
muxin	ecd2b7372b	style(Modal): fix content break lines (#39249 ) close #39247	2022-12-04 23:34:58 +08:00
Wuxh	325225e80d	chore(tree): remove flex style (#39209 ) * chore(tree): remove flex style fix: #39194 * update	2022-12-04 17:43:07 +08:00
二货机器人	48a0cf348c	chore: force trigger CI	2022-12-04 17:26:23 +08:00
Dunqing	9e204c2117	docs: fix table drag demo style is incorrect (#39236 )	2022-12-04 15:28:34 +08:00
二货爱吃白萝卜	fe60528e84	fix: Dropdown sub-menu missing motion (#39235 ) * chore: fix dropdown motion miss * fix: dropdown missing motion & site check	2022-12-04 13:22:57 +08:00
Wuxh	3d9046d079	docs: improve preview interaction (#38802 ) docs: improve preview interaction	2022-12-04 01:05:33 +08:00
afc163	86de75649e	style: fix TimePicker panel style inside RangePicker (#39228 ) close #39223	2022-12-04 00:45:10 +08:00
afc163	0d6e46b253	docs: fix extra line in index.md (#39225 )	2022-12-03 22:57:01 +08:00
afc163	3c3d6dfa8a	chore: enable bundlesize github checks (#39220 )	2022-12-03 22:56:35 +08:00
lijianan	2c7360d409	site: fix theme-editor link (#39224 ) * fix: fix theme-editor link * Update docs/react/customize-theme.zh-CN.md Co-authored-by: afc163 <afc163@gmail.com> * Update customize-theme.en-US.md Co-authored-by: afc163 <afc163@gmail.com>	2022-12-03 22:55:25 +08:00
Arnaud Benhamdine	33e06a2b92	chore(Drawer): Improve warning message wording and demo doc (#39207 ) * Improve warning message wording * Improve wording in demo * Fix test	2022-12-03 19:36:03 +08:00
fengmk2	4679790deb	🤖 TEST: Use bundlesize2 instead (#39216 ) Or remove all bundlesize script https://github.com/ant-design/ant-design/discussions/36574	2022-12-03 15:01:58 +08:00
muxin	f9b97897b3	fix(Card): fix card actions' style (#39210 ) close #39210	2022-12-03 14:56:31 +08:00
bluelovers	5309b68cfc	docs: Update index.zh-CN.md (#39213 )	2022-12-03 14:51:28 +08:00
二货爱吃白萝卜	4d33b7443b	docs: Add more desc & warning (#39201 )	2022-12-02 22:44:16 +08:00
afc163	4e460cde42	docs: fix demo card icons color (#39191 )	2022-12-02 16:32:16 +08:00
lijianan	eb77c5a7e6	fix: fix Badge Wave borderColor error (#39182 ) * fix: fix Badge borderColor error * update demo * fix * update demo * fix * fix	2022-12-02 14:42:39 +08:00
MadCcc	bf9d4c3b6e	chore: update meta script	2022-12-02 14:18:21 +08:00
afc163	0baab01c39	docs: site detail	2022-12-01 23:53:20 +08:00
Wuxh	a4153d5399	fix(radio): fix disabled status check style (#39165 )	2022-12-01 21:02:55 +08:00
MadCcc	da097e63bf	chore: update token-meta structure	2022-12-01 20:52:51 +08:00
51wangping	705575a2af	fix: textarea attr(data-count) style (#39121 ) * fix: textarea attr(data-count) style * fix: direction value is equal to rtl then float value is left	2022-12-01 20:16:23 +08:00
MadCcc	f863703f12	chore: use startTransition to avoid affecting hydration (#39155 ) * chore: use startTransition to avoid affecting hydration * chore: code clean	2022-12-01 17:55:20 +08:00
二货爱吃白萝卜	720b514ac5	refactor: bump rc-input-number (#39154 ) * chore: bump rc-input-number * chore: fix lint	2022-12-01 16:47:35 +08:00
MadCcc	d891db0ada	docs: fix hydration (#39153 ) * docs: fix hydration * chore: recover style	2022-12-01 16:10:53 +08:00
afc163	15629910ec	docs: remove axure link (#39150 ) * Update resources.zh-CN.md * Update resources.en-US.md * Update resources.zh-CN.md	2022-12-01 16:09:11 +08:00
binyellow	4130e47df4	chore: fixed the value of color.hex when border-radius is changed (#39152 )	2022-12-01 16:06:22 +08:00
Peach	4a018d8c42	docs: fix server/client mismatch hydrate error (#39042 ) * docs: fix server/client mismatch hydrate error * chore: lint Co-authored-by: MadCcc <1075746765@qq.com>	2022-12-01 15:25:31 +08:00
Jung Min O	d76636ac95	style: modal content width issue without modal icon (#39047 ) * Fix modal width issue without modal icon * Update index.tsx * Update index.tsx * Apply suggestions from code review Co-authored-by: afc163 <afc163@gmail.com>	2022-12-01 15:15:30 +08:00
edc-hui	30e2e68bce	fix(Transfer): clicking the checkbox position cannot be unchecked and onSelectChange is triggered twice (#39078 )	2022-12-01 14:37:22 +08:00
Dave	337703d550	refactor(type): replace interface with type for export component (#39060 )	2022-12-01 14:33:51 +08:00
lijianan	65af95093b	type: type enhance (#39140 )	2022-12-01 12:22:11 +08:00
lijianan	ada192f3a0	site: fix site error (#39138 )	2022-12-01 12:21:42 +08:00
Wuxh	a7f94d5457	fix(steps): fix steps style (#39100 ) * fix(steps): fix steps style * docs(steps): update demo * style: formater * docs(steps): update demo * test: update snapshot * fix(steps): fix the line style in vertical state * chore: supplement `8abeac7643` * fix: coverage	2022-12-01 10:57:48 +08:00
Wuxh	880a57298e	chore(site): support for opening debug component demos (#39132 )	2022-12-01 10:43:52 +08:00
二货爱吃白萝卜	134647d12f	fix: form responsive logic (#39130 )	2022-12-01 10:37:52 +08:00
afc163	ee235de285	Update css-in-js.zh-CN.md	2022-11-30 23:02:09 +08:00
二货爱吃白萝卜	15e9260d6b	docs: Update demo (#39128 )	2022-11-30 22:50:57 +08:00