手把手教你mint-ui插件修改的默认样式

mint-ui插件中的navbar如何修改选中前后的默认样式？

最近在用做一个vue做一个项目，里面用到mint的navbar。引进来之后发现默认样式跟设计图不一样，后来自己琢磨修改，顺便记录一下，望各位大佬指正(抱拳）
阅读文章的前提是已经搭建好框架或者已使用vue脚手架搭建好服务，
如果还不会使用脚手架请参考另一篇文章—☞脚手架的使用

mint-ui中文网配置参考—☞戳我

首先安装mint-ui插件（可以选择全局安装）

npm i mint-ui -s

然后在main.js入口文件中引入并注册

import MintUI from 'mint-ui';//引入mint-ui插件
import 'mint-ui/lib/style.css' //引入mint-ui的css文件
Vue.use(MintUI);//注册MintUI

在任意组件中直接使用官方提供的代码块（这里以选项卡navbar为例）

<template>
  <div class="use">
	<mt-navbar v-model="selected">
		<mt-tab-item id="1">我喜欢的</mt-tab-item>
		  <mt-tab-item id="2">最近听的</mt-tab-item>
		</mt-navbar>
		
		<!-- tab-container -->
		<mt-tab-container v-model="selected">
		  <mt-tab-container-item id="1">
			//这里对应的是我喜欢的显示区
		  </mt-tab-container-item>
		  <mt-tab-container-item id="2">
		    //这里对应的是最近听的显示区
		  </mt-tab-container-item>
		</mt-tab-container>
  </div>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      selected: "1"
    };
  },
};
</script>

npm run serve 起服务之后显示默认样式如下

这个不符合项目图纸，所以接下来开始尝试改样式

通过观察发现选中时会新加一个is-selected类名
所以想要改变切换后的样式就可以拿它设置写上你想要的样式（注！在这里加上父元素是为了解决选择器 权重 问题）

}
/* tab切换 */
.use .mint-navbar {
     
  background: #222;
  align-items: center;
  width: 240px;
  margin: 0 auto;
  border: 1px solid #333;
  border-radius: 5px;
  margin: 10px auto 30px;
  height: 30px;
}
/* 设置切换后样式 */
.use .mint-navbar .mint-tab-item.is-selected {
     
  background: #333;
  border: 0;
  color: #ffffff;
  margin: 0;
}
/* 设置切换前样式 */
.use .mint-navbar .mint-tab-item {
     
  padding: 9px 0;
  color: hsla(0, 0%, 100%, 0.3);
}

整体想要居中可以外面包个盒子，再设置盒子居中之类的我就不一 一 贴代码了
完成后效果如下：

欢迎各位大佬指正、共同进步，如果帮到了您，点个赞再走呗。