Макет Ant Design не работает должным образом ⇐ CSS

[Anonymous]

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

https://2x.ant.design/comComponents/lay ... om-trigger
Это код моего компонента. (Full.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 (






nav 1



nav 2



nav 3








Content



);
}
}

export default Full;

Я использую этот компонент, как показано ниже, в файле App.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 (



);
}
}

export default App;

Мой файл Full.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;
}

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




Подробнее здесь: https://stackoverflow.com/questions/611 ... s-expected