Ant design Layout 顯示格式不對(duì)

import React, {Component} from 'react';
import {Layout} from 'antd';
import Main from "./Main";

const {Footer, Sider, Content} = Layout;

class App extends Component {
    render() {
        return (
            <div>
                <div>
                    <Layout>
                        <Layout>
                            <Sider>Sider</Sider>
                            <Content>Content</Content>
                        </Layout>
                        <Footer>Footer</Footer>
                    </Layout>
                </div>
                <Main />
            </div>
        );
    }
}

export default App;

我直接從官方copy下來(lái)的Layout code, 我只是去掉了Header. 顯示不正確。很奇怪，在官網(wǎng)上用codepen 打相同的代碼，顯示就是正確的。

我的顯示不正確的圖：

codepen上同樣的代碼，正確顯示結(jié)果：

我知道要@import '~antd/dist/antd.css';
從ant design官網(wǎng)上copy的其他組件都能正常顯示，唯獨(dú)Layout顯示異常