Vue修改mint-ui默认样式的方法
在使用vue框架开发时，饿了么的mint-ui框架是个不错的选择，但是有时候我们需要修改它的默认样式，方法如下：
1、在src/assets/css目录下新建scss文件，my-mint.scss，内容如下：
/*覆盖mint-ui的primary颜色，改为自己UI的主题色*/
$color-primary:#05AFAF;
.mint-header{
background-color:$color-primary;
}
.mint-button:not(.is-disabled):active::after{
opacity:.2/*.6*/
}
.mint-button--primary{
background-color:$color-primary;
}
.mint-button--primary.is-plain{
border:1pxsolid$color-primary;
color:$color-primary
}
.mint-badge.is-primary{
background-color:$color-primary
}
.mint-switch-input:checked+.mint-switch-core{
border-color:$color-primary;
background-color:$color-primary;
}
.mint-navbar.mint-tab-item.is-selected{
border-bottom:3pxsolid$color-primary;
color:$color-primary;
}
.mint-tabbar>.mint-tab-item.is-selected{
color:$color-primary;
}
.mint-searchbar-cancel{
color:$color-primary;
}
.mint-checkbox-input:checked+.mint-checkbox-core{
background-color:$color-primary;
border-color:$color-primary;
}
.mint-radio-input:checked+.mint-radio-core{
background-color:$color-primary;
border-color:$color-primary;
}
.mt-range-progress{
background-color:$color-primary;
}
.mt-progress-progress{
background-color:$color-primary;
}
.mint-msgbox-confirm{
color:$color-primary;
}
.mint-msgbox-confirm:active{
color:$color-primary;
}
.mint-datetime-action{
color:$color-primary;
}
2、在main.js中引入自定义的scss文件
import'./assets/css/my-mint.scss';//全局修改mint-UI样式
以上这篇Vue修改mint-ui默认样式的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。