antd react get different displays

Question

Having a antd with react, consider two options to render the Sider part.

Option 1: Create CustomSider:

import React from 'react';
import styles from './CustomSider.css';
import { Layout, Menu } from 'antd'
import { Link } from 'dva/router'

const CustomSider = () => {
  return (
    <Layout.Sider>
      <Menu mode="inline" theme="dark">
        <Menu.SubMenu title="Menu">
          <Menu.Item>Submenu</Menu.Item>
        </Menu.SubMenu>
      </Menu>
    </Layout.Sider>
  );
}

export default CustomSider;

and use the CustomSider as:

<BrowserRouter>
  <Layout>
    <Layout>
      <CustomSider/>
    </Layout>
  </Layout>
<Content>
  about
</Content>
</BrowserRouter>

In this case, the page is rendered as following:

Option 2： Render the Sider directly

<BrowserRouter>
  <Layout>
    <Layout>
      <Layout.Sider>
        <Menu mode="inline" theme="dark">
          <Menu.SubMenu title="Menu">
            <Menu.Item>Submenu</Menu.Item>
          </Menu.SubMenu>
        </Menu>
      </Layout.Sider>
    </Layout>
  </Layout>
<Content>
  about
</Content>
</BrowserRouter>

Then the output is:

I know that Option 2 renders the page as intended. But what causes the difference? And if I insist using Option 1, how can I render the page as Option 2.

Answer 1

You can try to wrap Layout.Sider with Layout and reduce one Layout in the router.