2025年mint-ui修改默认样式

科技前沿 • 2025-02-18 09:10 • 阅读 50

大家好，我是讯享网，很高兴认识大家。

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); }

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

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

2025年mint-ui修改默认样式

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

相关推荐