我正在尝试使用 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)
问题是，选项卡非常奇怪，单击选项卡没有任何效果。截屏：
我认为 Kabir 的回答是一个好的开始，我也会将其包装<Tabs>在工具栏<ToolbarGroup >的AppBar子集中。
例如
iconElementRight={<ToolbarGroup >{myTabs}</ToolbarGroup>}
聚会有点晚了，但一个对我有用的解决方案。仅供参考，这是一个带有 Rails 后端的 React/Redux 应用程序。
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router'
import AppBar from 'material-ui/AppBar'
import Drawer from 'material-ui/Drawer'
import MenuItem from 'material-ui/MenuItem'
import { getBasename } from '../config/environment'
export default class Navbar extends Component {
constructor(props) {
super(props)
this.state = {open: false}
this.displayNavbar = this.displayNavbar.bind(this)
}
toggleDrawer = () => this.setState({ open: !this.state.open })
authenticatedNavbar = () => {
return (
<div>
<AppBar
iconElementRight={
<MenuItem
containerElement={<Link to={getBasename() + 'login'} />}
onTouchTap={() => {this.props.onLogoutClick()}}
primaryText="Logout"
/>
}
onLeftIconButtonTouchTap={() => this.toggleDrawer()}
title="Your_app"
/>
<Drawer
docked={false}
onRequestChange={(open) => this.setState({open})}
open={this.state.open}
>
<MenuItem
containerElement={<Link to={getBasename() + 'home'} />}
onTouchTap={() => { this.toggleDrawer() }}
primaryText="Home"
/>
<MenuItem
containerElement={<Link to={getBasename() + 'some_component'} />}
onTouchTap={() => { this.toggleDrawer() }}
primaryText="Some Component"
/>
</Drawer>
</div>
)
}
unauthenticatedNavbar = () => {
return (
<div>
<AppBar
iconElementRight={
<MenuItem
containerElement={<Link to={getBasename() + 'login'} />}
primaryText="Login"
/>
}
showMenuIconButton={false}
title="Your_app"
/>
</div>
)
}
然后一些其他逻辑根据用户身份验证状态显示适当的 AppBar。
我真的不认为选项卡是 App Bar 的一部分。材料规范将它们显示为辅助工具栏。
如果要在 中水平显示多个项目AppBar，请将它们放在 a中Toolbar，它会很好地显示。请在此处查看此答案以了解原因。
如果要将导航栏推到右侧Box，flexGrow请1在Tabs. 这将创建一个空div元素。它之所以有效，是因为Toobar容器使用弹性布局。
<AppBar position="static">
<Toolbar>
<IconButton size="large" edge="start" color="inherit" sx={{ mr: 2 }}>
<MenuIcon />
</IconButton>
<Box flexGrow={1} />
<Tabs textColor="inherit">
<Tab label="One" />
<Tab label="Two" />
<Tab label="Three" />
</Tabs>
</Toolbar>
</AppBar>
export default function Demo() {
const [value, setValue] = React.useState(0);
const handleChange = (_, newValue) => setValue(newValue);
return (
<>
<AppBar position="static">
<Toolbar>
<IconButton size="large" edge="start" color="inherit" sx={{ mr: 2 }}>
<MenuIcon />
</IconButton>
<Typography
variant="h6"
noWrap
component="div"
sx={{ display: { xs: "none", sm: "block" } }}
>
MUI
</Typography>
<Box flexGrow={1} />
<Tabs value={value} onChange={handleChange} textColor="inherit">
<Tab label="One" />
<Tab label="Two" />
<Tab label="Three" />
</Tabs>
</Toolbar>
</AppBar>
<div index={value} onChangeIndex={setValue}>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
</div>
</>
);
}
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div role="tabpanel" hidden={value !== index} {...other}>
{value === index && (
<Box sx={{ p: 3 }}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
你用过 react-tap-event-plugin 吗？根据https://github.com/callemall/material-ui/issues/288它是需要的。
除了 CSS hack，我发现你可以使用HTML Entities作为 hack 来拆分标签文本。您可以添加 到选项卡标签的开头和结尾，并且您有自己的空间。
它使标签字符串变得丑陋，但如果您不太在意，它可以很好地完成工作，并且它还允许您添加任意数量的空格。
这是更新的代码：
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)
和截图： 带空格的标签
您是否阅读了 Material-UI文档？
尝试将您的内容作为iconElementRight道具传递。
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 )