diff --git a/antdv-demo b/antdv-demo
index bda092900..549184a4f 160000
--- a/antdv-demo
+++ b/antdv-demo
@@ -1 +1 @@
-Subproject commit bda092900405709ab19219754c43d68975a143be
+Subproject commit 549184a4fab38d9a234bc04e818ecc8b958ab4f4
diff --git a/components/layout/Sider.jsx b/components/layout/Sider.jsx
index 0aa1bc0d4..42c179fe1 100644
--- a/components/layout/Sider.jsx
+++ b/components/layout/Sider.jsx
@@ -14,6 +14,7 @@ import { ConfigConsumerProps } from '../config-provider';
 import BarsOutlined from '@ant-design/icons-vue/BarsOutlined';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
+import omit from 'omit.js';
 
 // matchMedia polyfill for
 // https://github.com/WickyNilliams/enquire.js/issues/82
@@ -53,6 +54,9 @@ export const SiderProps = {
   collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   breakpoint: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
   theme: PropTypes.oneOf(['light', 'dark']).def('dark'),
+  onBreakpoint: PropTypes.func,
+  onCollapse: PropTypes.func,
+  'onUpdate:collapse': PropTypes.func,
 };
 
 // export interface SiderState {
@@ -177,16 +181,29 @@ export default {
   render() {
     const {
       prefixCls: customizePrefixCls,
+      class: className,
       theme,
       collapsible,
       reverseArrow,
+      style,
       width,
       collapsedWidth,
       zeroWidthTriggerStyle,
-    } = getOptionProps(this);
+      ...others
+    } = { ...getOptionProps(this), ...this.$attrs };
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
-
+    const divProps = omit(others, [
+      'collapsed',
+      'defaultCollapsed',
+      'onCollapse',
+      'breakpoint',
+      'onBreakpoint',
+      'siderHook',
+      'zeroWidthTriggerStyle',
+      'trigger',
+      'onUpdate:collapse',
+    ]);
     const trigger = getComponent(this, 'trigger');
     const rawWidth = this.sCollapsed ? collapsedWidth : width;
     // use "px" as fallback unit for width
@@ -219,24 +236,20 @@ export default {
           )
         : null;
     const divStyle = {
-      // ...style,
+      ...style,
       flex: `0 0 ${siderWidth}`,
       maxWidth: siderWidth, // Fix width transition bug in IE11
       minWidth: siderWidth, // https://github.com/ant-design/ant-design/issues/6349
       width: siderWidth,
     };
-    const siderCls = classNames(prefixCls, `${prefixCls}-${theme}`, {
+    const siderCls = classNames(className, prefixCls, `${prefixCls}-${theme}`, {
       [`${prefixCls}-collapsed`]: !!this.sCollapsed,
       [`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
       [`${prefixCls}-below`]: !!this.below,
       [`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
     });
-    const divProps = {
-      class: siderCls,
-      style: divStyle,
-    };
     return (
-      <aside {...divProps}>
+      <aside class={siderCls} {...divProps} style={divStyle}>
         <div class={`${prefixCls}-children`}>{getSlot(this)}</div>
         {collapsible || (this.below && zeroWidthTrigger) ? triggerDom : null}
       </aside>
diff --git a/components/layout/__tests__/index.test.js b/components/layout/__tests__/index.test.js
index 986b187d6..ab6324077 100644
--- a/components/layout/__tests__/index.test.js
+++ b/components/layout/__tests__/index.test.js
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
-import * as Vue from 'vue';
 import Layout from '..';
 import mountTest from '../../../tests/shared/mountTest';
+import { sleep } from '../../../tests/utils';
 
 const { Sider, Content } = Layout;
 
@@ -9,58 +9,61 @@ describe('Layout', () => {
   mountTest(Layout);
   mountTest(Content);
   mountTest(Sider);
-  it('detect the sider as children', done => {
-    const wrapper = mount({
-      render() {
-        return (
-          <Layout>
-            <Sider>Sider</Sider>
-            <Content>Content</Content>
-          </Layout>
-        );
-      },
-    });
-    Vue.nextTick(() => {
-      expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
-      done();
-    });
-  });
-
-  it('detect the sider inside the children', done => {
-    const wrapper = mount({
-      render() {
-        return (
-          <Layout>
-            <div>
+  it('detect the sider as children', async () => {
+    const wrapper = mount(
+      {
+        render() {
+          return (
+            <Layout>
               <Sider>Sider</Sider>
-            </div>
-            <Content>Content</Content>
-          </Layout>
-        );
+              <Content>Content</Content>
+            </Layout>
+          );
+        },
       },
-    });
-    Vue.nextTick(() => {
-      expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
-      done();
-    });
+      { sync: false },
+    );
+    await sleep();
+    expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
   });
 
-  it('detect ant-layout-sider-has-trigger class in sider when ant-layout-sider-trigger div tag exists', done => {
-    const wrapper = mount({
-      render() {
-        return (
-          <Layout>
-            <div>
-              <Sider collapsible>Sider</Sider>
-            </div>
-            <Content>Content</Content>
-          </Layout>
-        );
+  it('detect the sider inside the children', async () => {
+    const wrapper = mount(
+      {
+        render() {
+          return (
+            <Layout>
+              <div>
+                <Sider>Sider</Sider>
+              </div>
+              <Content>Content</Content>
+            </Layout>
+          );
+        },
       },
-    });
-    Vue.nextTick(() => {
-      expect(wrapper.find('.ant-layout-sider').classes()).toContain('ant-layout-sider-has-trigger');
-      done();
-    });
+      { sync: false },
+    );
+    await sleep();
+    expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
+  });
+
+  it('detect ant-layout-sider-has-trigger class in sider when ant-layout-sider-trigger div tag exists', async () => {
+    const wrapper = mount(
+      {
+        render() {
+          return (
+            <Layout>
+              <div>
+                <Sider collapsible>Sider</Sider>
+              </div>
+              <Content>Content</Content>
+            </Layout>
+          );
+        },
+      },
+      { sync: false },
+    );
+    await sleep();
+    expect(wrapper.find('.ant-layout-sider').classes()).toContain('ant-layout-sider-has-trigger');
   });
 });
diff --git a/components/layout/layout.jsx b/components/layout/layout.jsx
index 7b8db2774..dacb9a3ef 100644
--- a/components/layout/layout.jsx
+++ b/components/layout/layout.jsx
@@ -1,4 +1,4 @@
-import { inject } from 'vue';
+import { inject, provide } from 'vue';
 import PropTypes from '../_util/vue-types';
 import classNames from 'classnames';
 import { getOptionProps, getSlot } from '../_util/props-util';
@@ -54,17 +54,15 @@ const BasicLayout = {
       siders: [],
     };
   },
-  provide() {
-    return {
-      siderHook: {
-        addSider: id => {
-          this.siders = [...this.siders, id];
-        },
-        removeSider: id => {
-          this.siders = this.siders.filter(currentId => currentId !== id);
-        },
+  created() {
+    provide('siderHook', {
+      addSider: id => {
+        this.siders = [...this.siders, id];
       },
-    };
+      removeSider: id => {
+        this.siders = this.siders.filter(currentId => currentId !== id);
+      },
+    });
   },
   render() {
     const { prefixCls, hasSider, tagName: Tag } = this;
diff --git a/tests/setup.js b/tests/setup.js
index c35cb6fc7..67e598618 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -8,15 +8,15 @@ if (typeof window !== 'undefined') {
     global.window.dispatchEvent(new Event('resize'));
   };
   global.window.scrollTo = () => {};
-  if (!window.matchMedia) {
-    Object.defineProperty(global.window, 'matchMedia', {
-      value: jest.fn(query => ({
-        matches: query.includes('max-width'),
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-      })),
-    });
-  }
+  // if (!window.matchMedia) {
+  //   Object.defineProperty(global.window, 'matchMedia', {
+  //     value: jest.fn(query => ({
+  //       matches: query.includes('max-width'),
+  //       addListener: jest.fn(),
+  //       removeListener: jest.fn(),
+  //     })),
+  //   });
+  // }
 }
 
 // The built-in requestAnimationFrame and cancelAnimationFrame not working with jest.runFakeTimes()