Ant Design 侧边栏布局示例未按预期工作

Question

我有一个带有 Ant 设计组件框架版本 4 的 React webapp。

我尝试在我的 webapp 中使用来自 Antd 文档的这个示例： https://codesandbox.io/s/ymspt

但是当我在我的 web 应用程序中使用代码时，我没有得到相同的结果。 This is how it looks like in my app

import { MenuFoldOutlined, MenuUnfoldOutlined, UploadOutlined, UserOutlined, VideoCameraAddOutlined } from "@ant-design/icons";
import { Layout, Menu, Space } from "antd";
import { Content, Footer, Header } from "antd/lib/layout/layout";
import Sider from "antd/lib/layout/Sider";
import React, { useState } from "react";
import { logOut } from "../firebase";


function Lineups() {
    const [collapsed, setCollapsed] = useState(false);
    const [logoText, setLogoText] = useState("TEAMTAC");

    const toggle = () => {
        setCollapsed(!collapsed);
        collapsed ? setLogoText("TEAMTAC") : setLogoText("TT")
    };

    const signOutFirebase = async () => {
        await logOut();
    }

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={collapsed} onCollapse={toggle}>
               <h2 style={{textAlign:"center", marginTop: 15}}>{logoText}</h2>
                <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                    <Menu.Item key="1" icon={<UserOutlined />}>
                        nav 1
                    </Menu.Item>
                    <Menu.Item key="2" icon={<VideoCameraAddOutlined />}>
                        nav 2
                    </Menu.Item>
                    <Menu.Item key="3" icon={<UploadOutlined />}>
                        nav 3
                    </Menu.Item>
                </Menu>
            </Sider>
            <Layout className="site-layout">
                <Header  style={{ padding: 5 }}>
                 Header
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                    }}
                >
                    Content
                </Content>
                <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>

            </Layout>
        </Layout>
    )
}

export default Lineups;

我没有任何额外的 CSS 或其他任何东西。

为什么我没有得到相同的结果？

Answer 1

问题是我导入的组件。 我做错了。

所以不是

import { Content, Footer, Header } from "antd/lib/layout/layout";

我不得不这样做

import { Layout } from "antd"; 
...
const { Header, Footer, Sider, Content } = Layout;