Ant Design Layout не работает должным образом

Question

У меня есть приложение React . Я решил добавить макет, используя Ant Design . И я последовал примеру ниже.

https://2x.ant.design/components/layout/#components -layout-demo-custom-trigger

Это мой код компонента. (Полный. js)

import React, { Component, Fragment } from 'react'
import { Layout, Menu } from 'antd'
import Icon from '@ant-design/icons'
import './Full.css'
import ReactDOM from 'react-dom'
import DailyData from '../DailyData'
import Container from 'react-bootstrap/Container'
import Toggle from './Toggle'

const { Header, Footer, Sider, Content } = Layout;

class Full extends React.Component {

    state = {
        collapsed: false,
    };
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }

    render() {
        return (
            <Layout style={{ height: "100vh" }}>
                <Sider
                    trigger={null}
                    collapsible
                    collapsed={this.state.collapsed}
                >
                    <div className="logo" />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        <Menu.Item key="1">
                            <Icon type="user" />
                            <span>nav 1</span>
                        </Menu.Item>
                        <Menu.Item key="2">
                            <Icon type="video-camera" />
                            <span>nav 2</span>
                        </Menu.Item>
                        <Menu.Item key="3">
                            <Icon type="upload" />
                            <span>nav 3</span>
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout>
                    <Header style={{ background: '#fff', padding: 0 }}>
                        <Icon
                            className="trigger"
                            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                            onClick={this.toggle}
                        />
                    </Header>
                    <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
                        Content
              </Content>
                </Layout>
            </Layout>
        );
    }
}

export default Full;

Я использую этот компонент, как показано ниже в Приложении. js файл.

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './components/layout/Header.js'
import DailyData from './components/DailyData.js'
import Container from 'react-bootstrap/Container'
import Toggle from './components/layout/Toggle.js'
import Full from './components/layout/Full'


class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="App">
        <Full />
      </div >
    );
  }
}

export default App;

Мой Полный. css файл, как показано ниже.

#components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 16px;
    cursor: pointer;
    transition: color .3s;
  }

  #components-layout-demo-custom-trigger .trigger:hover {
    color: #108ee9;
  }

  #components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: #333;
    border-radius: 6px;
    margin: 16px;
  }

Но вывод будет отображаться следующим образом.