javascript - 使用 Material-UI 创建导航栏

Question

我正在尝试使用 Material-UI 创建一个简单的导航栏，看起来像他们在 their site 上使用的导航栏。 。这是我为了尝试复制它而编写的代码:

import React from 'react'
import {AppBar, Tabs, Tab} from 'material-ui'

class Nav extends React.Component {
  render() {
    return (
      <AppBar title="My App">
        <Tabs>
          <Tab label="Item 1" />
          <Tab label="Item 2" />
          <Tab label="Item 3" />
          <Tab label="Item 4" />
        </Tabs>
      </AppBar>
    )
  }
}

React.render(<Nav />, document.body)

问题是，选项卡出现非常奇怪，单击选项卡没有任何效果。截图:

Answer 1

最新更新 [2018]

Problem should be fixed in latest version.

更新 #1 [2016]

至少，the will is there - 并非所有希望都破灭了!

原帖

有同样的问题。

事实证明，这是一个bug (#773) .

但是你很幸运:This PR提供了使用 CSS 的解决方案。它(有点)有效。这是屏幕截图:

正如您所看到的，它看起来有点难看，因此您可能需要继续摆弄 CSS 以使选项卡出现在正确的位置。

注意:八个月前，the PR got rejected 。显然，在 AppBar 中显示 Tab 并不是高优先级，因此，hackfix 解决方案就是您目前所拥有的一切!

哦，使用预发布库的痛苦!