ant design mysql_ant design layout 显示问题

import React, { Component } from 'react';

import { Layout, Menu, Icon } from 'antd';

const { Header, Sider, Content } = Layout;

import './App.css';

class App extends Component {

state = {

collapsed: false,

};

toggle = () => {

this.setState({

collapsed: !this.state.collapsed,

});

};

render() {

return (

<Layout>

<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 className="nav-text">nav 1</span>

</Menu.Item>

<Menu.Item key="2">

<Icon type="video-camera" />

<span className="nav-text">nav 2</span>

</Menu.Item>

<Menu.Item key="3">

<Icon type="upload" />

<span className="nav-text">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 App;