使用material-ui创建导航栏

本文介绍了使用material-ui创建导航栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在尝试使用material-ui创建一个简单的导航栏，看起来就像他们在 非常感谢任何帮助。解决方案 最新更新[2018] 尽可能看，它看起来有点难看，所以你可能想继续摆弄CSS以使标签显示在正确的位置。 注意：八个月前， PR被拒绝了。显然，在 AppBar 中显示标签并不是高优先级的，所以，hackfix解决方案就是你现在所拥有的一切！ 哦使用预发布库的痛苦！ I'm trying to create a simple navbar with material-ui that looks like the one they use on their site. This is the code I wrote to try to replicate it: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)The problem is, the tabs are coming up very weird and clicking on the tabs have no effect whatsoever. Screenshot:Any help would be very much appreciated. 解决方案 Latest Update [2018]Problem should be fixed in latest version.Update #1 [2016]At least, the will is there - Not all hope is lost!Original PostHad the same issue.Turns out, it's a bug (#773).But you are in luck: This PR provides a solution using CSS. It (kinda) works. Here is a screenshot:As you can see, it looks a bit ugly, so you might want to keep fiddling with the CSS to get the tabs appear in the right place.NOTE: Eight months ago, the PR got rejected. Apparently, displaying Tabs in AppBar is not high-priority, so, the hackfix solution is all you got at the moment!Oh the agony of using pre-release libraries! 这篇关于使用material-ui创建导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！