怎么显示效果不同呢？

来源：2-2 Header组件拆分及样式布局（2）

Aurora_Meteor

2020-06-02 08:14:22

导入的导航组件，按老师的代码修改样式后好高呀，组件库更新了所以样式是也跟着变啦？

我看到有同学说什么导入icon报错，我这是因为直接安装的antd所以是最新版的么？所以直接使用官网的组件库不会报错？

import React, { Component, Fragment } from "react";
import { Menu } from "antd";
import { MailOutlined } from "@ant-design/icons";
import logo from "./logo.png";
import "./style.css";

class AppHeader extends Component {
  render() {
    return (
      <Fragment>
        <img src={logo} className="app-header-logo" />
        <Menu mode="horizontal" className="app-header-menu">
          <Menu.Item key="mail" icon={<MailOutlined />}>
            VOA慢速英语
          </Menu.Item>
          <Menu.Item key="mail2" icon={<MailOutlined />}>
            VOA慢速英语
          </Menu.Item>
          <Menu.Item key="mail3" icon={<MailOutlined />}>
            VOA慢速英语
          </Menu.Item>
          <Menu.Item key="mail4" icon={<MailOutlined />}>
            VOA慢速英语
          </Menu.Item>
          <Menu.Item key="mail5" icon={<MailOutlined />}>
            VOA慢速英语
          </Menu.Item>
          <Menu.Item key="mail6" icon={<MailOutlined />}>
            VOA慢速英语
          </Menu.Item>
        </Menu>
      </Fragment>
    );
  }
}

export default AppHeader;

.app-header-logo {
    float: left;
    height: 45px;
    margin-top: 10px;
}

.app-header-menu {
    float: left;
    margin-left: 20px !important;
    margin-top: 10px !important;
    border-bottom: none !important;
}