diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
index 540049da3694..319a62fe5415 100644
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -52,6 +52,7 @@ export interface SiderProps extends React.HTMLAttributes<HTMLDivElement> {
   defaultCollapsed?: boolean;
   reverseArrow?: boolean;
   onCollapse?: (collapsed: boolean, type: CollapseType) => void;
+  zeroWidthTriggerStyle?: React.CSSProperties;
   trigger?: React.ReactNode;
   width?: number | string;
   collapsedWidth?: number | string;
@@ -186,6 +187,7 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
       style,
       width,
       collapsedWidth,
+      zeroWidthTriggerStyle,
       ...others
     } = this.props;
     const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
@@ -196,6 +198,7 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
       'breakpoint',
       'onBreakpoint',
       'siderHook',
+      'zeroWidthTriggerStyle',
     ]);
     const rawWidth = this.state.collapsed ? collapsedWidth : width;
     // use "px" as fallback unit for width
@@ -208,6 +211,7 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
           className={`${prefixCls}-zero-width-trigger ${prefixCls}-zero-width-trigger-${
             reverseArrow ? 'right' : 'left'
           }`}
+          style={zeroWidthTriggerStyle}
         >
           <Icon type="bars" />
         </span>
diff --git a/components/layout/__tests__/index.test.js b/components/layout/__tests__/index.test.js
index 171a67c9aa53..458b8bf7674a 100644
--- a/components/layout/__tests__/index.test.js
+++ b/components/layout/__tests__/index.test.js
@@ -185,4 +185,20 @@ describe('Sider', () => {
       'Warning: [antd: Menu] `inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
     );
   });
+
+  it('zeroWidthTriggerStyle should work', () => {
+    const wrapper = mount(
+      <Sider collapsedWidth={0} collapsible zeroWidthTriggerStyle={{ background: '#F96' }}>
+        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
+          <Menu.Item key="1">
+            <Icon type="user" />
+            <span>nav 1</span>
+          </Menu.Item>
+        </Menu>
+      </Sider>,
+    );
+    expect(wrapper.find('.ant-layout-sider-zero-width-trigger').props().style).toEqual({
+      background: '#F96',
+    });
+  });
 });
diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md
index 169f37918a8e..d25dd32ea88e 100644
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@@ -100,6 +100,7 @@ The sidebar.
 | width | width of the sidebar | number\|string | 200 |  |
 | onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |  |
 | onBreakpoint | the callback function, executed when [breakpoints](/components/grid#api) changed | (broken) => {} | - | 3.7.0 |
+| zeroWidthTriggerStyle | to customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - | 3.24.0 |
 
 #### breakpoint width
 
diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md
index 12d800a37a0d..d60a94b15017 100644
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@@ -101,6 +101,7 @@ title: Layout
 | width | 宽度 | number\|string | 200 |  |
 | onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |  |
 | onBreakpoint | 触发响应式布局[断点](/components/grid#api)时的回调 | (broken) => {} | - | 3.7.0 |
+| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - | 3.24.0 |
 
 #### breakpoint width