统一设置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中加入如下代码：


    
    标题

界面效果如下：

原始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代码：

或者使用另一种方式：设置沉浸式状态栏。这种方式比较麻烦，不推荐使用，除非你用到了iOS原生侧滑返回功能，可以参考下面这两篇文章（请按顺序看）：
MUI-解决iOS原生侧滑返回时状态栏出现白色条的问题（设置沉浸式状态栏）
MUI-设置沉浸式状态栏后MUI导航栏的高度问题
解决完状态栏后的效果如下：

解决完状态栏问题的MUI导航栏