diff --git a/packages/layout/src/components/SiderMenu/index.tsx b/packages/layout/src/components/SiderMenu/index.tsx
index 8f29ea9c4c9e..ecd43cbcda06 100644
--- a/packages/layout/src/components/SiderMenu/index.tsx
+++ b/packages/layout/src/components/SiderMenu/index.tsx
@@ -1,8 +1,9 @@
+import { ProProvider } from '@ant-design/pro-provider';
 import { openVisibleCompatible } from '@ant-design/pro-utils';
 import { ConfigProvider, Drawer } from 'antd';
 import classNames from 'classnames';
 import Omit from 'omit.js';
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import type { PrivateSiderMenuProps, SiderMenuProps } from './SiderMenu';
 import { SiderMenu } from './SiderMenu';
 import { useStyle } from './style/index';
@@ -16,10 +17,12 @@ const SiderMenuWrapper: React.FC<SiderMenuProps & PrivateSiderMenuProps> = (prop
     style,
     className,
     hide,
-    getContainer,
+    getContainer = false,
     prefixCls,
   } = props;
 
+  const { token } = useContext(ProProvider);
+
   useEffect(() => {
     if (isMobile === true) {
       onCollapse?.(true);
@@ -61,7 +64,13 @@ const SiderMenuWrapper: React.FC<SiderMenuProps & PrivateSiderMenuProps> = (prop
         closable={false}
         getContainer={getContainer}
         width={siderWidth}
-        bodyStyle={{ height: '100vh', padding: 0, display: 'flex', flexDirection: 'row' }}
+        bodyStyle={{
+          height: '100vh',
+          padding: 0,
+          display: 'flex',
+          flexDirection: 'row',
+          backgroundColor: token?.layout?.sider?.colorMenuBackground,
+        }}
       >
         <SiderMenu
           {...omitProps}
diff --git a/tests/layout/__snapshots__/mobile.test.tsx.snap b/tests/layout/__snapshots__/mobile.test.tsx.snap
index d2251d4ada16..b4f2a9a468b6 100644
--- a/tests/layout/__snapshots__/mobile.test.tsx.snap
+++ b/tests/layout/__snapshots__/mobile.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`mobile BasicLayout 📱 base use 1`] = `
             >
               <div
                 class="ant-drawer-body"
-                style="height: 100vh; padding: 0px; display: flex; flex-direction: row;"
+                style="height: 100vh; padding: 0px; display: flex; flex-direction: row; background-color: transparent;"
               >
                 <aside
                   class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-light"
@@ -306,7 +306,7 @@ exports[`mobile BasicLayout 📱 collapsed=false 1`] = `
             >
               <div
                 class="ant-drawer-body"
-                style="height: 100vh; padding: 0px; display: flex; flex-direction: row;"
+                style="height: 100vh; padding: 0px; display: flex; flex-direction: row; background-color: transparent;"
               >
                 <aside
                   class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-light"
@@ -781,7 +781,7 @@ exports[`mobile BasicLayout 📱 layout=mix 1`] = `
             >
               <div
                 class="ant-drawer-body"
-                style="height: 100vh; padding: 0px; display: flex; flex-direction: row;"
+                style="height: 100vh; padding: 0px; display: flex; flex-direction: row; background-color: transparent;"
               >
                 <aside
                   class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-light"
@@ -1069,7 +1069,7 @@ exports[`mobile BasicLayout 📱 layout=mix and splitMenus 1`] = `
             >
               <div
                 class="ant-drawer-body"
-                style="height: 100vh; padding: 0px; display: flex; flex-direction: row;"
+                style="height: 100vh; padding: 0px; display: flex; flex-direction: row; background-color: transparent;"
               >
                 <aside
                   class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-light"