使用material-ui创建导航栏

Question

我正在尝试使用material-ui创建一个简单的导航栏,看起来就像他们在网站上使用的那个.这是我写的试图复制它的代码:

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]

问题应该在最新版本中修复.

更新#1 [2016]

至少,意志在那里 - 并非所有的希望都失去了!

原帖

有同样的问题.

事实证明,这是一个错误(#773).

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

正如您所看到的,它看起来有点难看,因此您可能希望继续摆弄CSS以使选项卡显示在正确的位置.

注意:八个月前,PR被拒绝了.显然,显示Tabs在AppBar不高的优先级,这样,hackfix解决方案是你的时刻了!

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

Answer 2

您阅读了 Material-UI文档吗？

尝试将您的内容作为iconElementRightprop 传递。

IE：

render() {
    var myTabs = (
        <Tabs>
            <Tab label="item 1" />
            <Tab label="item 2" />
        </Tabs>
    );
    return <AppBar title="My App" iconElementRight={myTabs} />
}

不过，看起来确实只支持 3 种样式（如文档中的 3 个示例所示）。您可能必须在样式上发挥创意，因为它看起来不太灵活。

PS 祝你好运，因为自从他们切换到内联样式和自己的自定义主题后，很难更改内容或集成其他非 mui 组件（我对此感到非常推迟，我创建了一个使用 SASS https:// /www.npmjs.com/package/material-ui-with-sass）