反应语义 ui Header 菜单

Question

我正在使用 semantic-ui-react 创建 Header。我为此使用 Menu 项，这是我的代码：

 export default class Header extends Component {
  render() {
    return (
      <Menu stackable>
        <Menu.Item name="search">
          <Search />
        </Menu.Item>

        <Menu.Item name="username">
          <User username="user" />
        </Menu.Item>

        <Menu.Item name="bell">
          <Bell />
        </Menu.Item>
        <Menu.Menu position="right">
          <Menu.Item name="search">
            <img src={logo} />
          </Menu.Item>
        </Menu.Menu>
      </Menu>
    );
  }
}

在应用程序容器中：

return (
    <Container fluid > 
       <Header />
    </Container>

但是我在页面上看到和呈现的内容就像一个列表，没有任何样式，甚至在文档页面示例中也不像：Doc's 有什么我错过的吗？

Answer 1

来自文档：

Installing Semantic UI React provides the JavaScript for your components. You'll also need to include a stylesheet to provide the styling for your components

你可以这样做：

$ npm install semantic-ui-css --save

安装后，在您的 JS 文件中包含：

import 'semantic-ui-css/semantic.min.css';

反应语义 ui Header 菜单

react semantic ui Header menu

reactjs

semantic-ui

semantic-ui-react