统一设置MUI的导航栏样式（重写MUI控件）
MUI以iOS 7为基础，补充了部分Android特有控件。其实这些控件就是一组CSS样式+JS交互实现的，它们分别被封装在mui.css和mui.js文件中。学过CSS的都知道，可以利用CSS样式的优先级重写已存在的样式。下面就用这种方法统一设置项目中的MUI导航栏。
原创文章,欢迎转载.转载请注明出处: https://www.jianshu.com/p/7e27185debac
MUI的导航栏：
为页面添加MUI导航栏只需要在HTML的body中加入如下代码：
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
界面效果如下：
原始MUI导航栏
重写MUI导航栏：
下面将导航栏的背景颜色改为浅蓝色，底部阴影改为一条深灰色的线，返回按钮和标题颜色改为白色并调整大小和字体粗细程度。
首先以更改背景颜色为例：
将当前页面用Google浏览器打开，点击鼠标右键选中检查会出现如下界面：
谷歌浏览器调试界面
选中导航栏标签就可以在右下角看到关于导航栏的样式。这里.mui-bar是一个类选择器，其中background-color属性正是导航栏的背景颜色（可以临时修改一下对应的颜色值，观察一下左边导航栏视图的变化，就可以确定这个颜色值是不是导航栏的背景颜色）。
所以只需要在引入mui.min.css样式之后，加入下面的样式：
/*导航栏背景颜色*/
.mui-bar {
background-color: #20BBEF;
}
接下来可以参考更改导航栏背景颜色的方式修改其他样式：
如何确定要修改的样式，可以参考上面的方法，这里直接贴出代码。
修改返回按钮的颜色和大小：
/*返回按钮图标*/
.mui-bar .mui-icon {
font-size: 30px;
padding-top: 7px;
padding-bottom: 13px;
color: #FFFFFF;
}
修改标题字体颜色和粗细程度：
/*标题*/
.mui-bar .mui-title {
font-weight: 400;
color: #FFFFFF;
}
修改导航栏底部阴影：
/*导航栏底部阴影*/
.mui-bar-nav {
box-shadow: 0px 1px 0px 0px #999999;
}
统一封装到一个css文件中
-
可以将上面修改导航栏样式的代码统一放到一个css文件中，只需要在每个页面中引入mui.min.css文件之后引入这个文件即可（当然也可以把这些代码追加到mui.min.css文件末尾，这是因为我们重写的样式和MUI的样式优先权重相同，将我们重写的样式放在MUI样式之后就会有更高的优先级）。
-
也可以在重写的样式前加上header标签来增加权重，这样就不需要关心文件引入的先后顺序啦。以修改背景颜色为例如下：
/*导航栏背景颜色*/ header.mui-bar { background-color: #20BBEF; }注意：这里是交集选择器，header和.mui-bar之间没有空格！
重写后的效果：
重写后导航栏的界面效果如下：
重写后的MUI导航栏
这里的状态栏背景颜色依然是白色，字体颜色依然是黑色。如果想修改可以在App首次进入的页面中添加如下js代码：
<script type="text/javascript" charset="utf-8">
mui.plusReady(function(){
plus.navigator.setStatusBarStyle("light");
plus.navigator.setStatusBarBackground("#20BBEF");
});
</script>
或者使用另一种方式：设置沉浸式状态栏。这种方式比较麻烦，不推荐使用，除非你用到了iOS原生侧滑返回功能，可以参考下面这两篇文章（请按顺序看）：
MUI-解决iOS原生侧滑返回时状态栏出现白色条的问题（设置沉浸式状态栏）
MUI-设置沉浸式状态栏后MUI导航栏的高度问题
解决完状态栏后的效果如下：
解决完状态栏问题的MUI导航栏
