Vue修改mint-ui默認(rèn)樣式的方法
更新時(shí)間：2018年02月03日 15:43:43 作者：蘭色的fire
下面小編就為大家分享一篇Vue修改mint-ui默認(rèn)樣式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
在使用vue框架開(kāi)發(fā)時(shí)，餓了么的mint-ui框架是個(gè)不錯(cuò)的選擇，但是有時(shí)候我們需要修改它的默認(rèn)樣式，方法如下：
1、在src/assets/css目錄下新建scss文件，my-mint.scss，內(nèi)容如下：
/* 覆蓋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: 1px solid $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: 3px solid $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默認(rèn)樣式的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3后臺(tái)管理系統(tǒng)之創(chuàng)建和配置項(xiàng)目
后臺(tái)管理系統(tǒng)是我們?nèi)粘ｉ_(kāi)發(fā)學(xué)習(xí)經(jīng)常遇到的一個(gè)項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于Vue3后臺(tái)管理系統(tǒng)之創(chuàng)建和配置項(xiàng)目的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue.js每天必學(xué)之表單控件綁定，如何在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定，感興趣的小伙伴們可以參考一下2016-09-09
vue項(xiàng)目打包優(yōu)化方式(讓打包的js文件變小)
這篇文章主要介紹了vue項(xiàng)目打包優(yōu)化方式(讓打包的js文件變小)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在本篇文章中，我們給大家詳細(xì)講述了vue中如何配置less的詳細(xì)代碼和步驟，有需要的朋友跟著學(xué)習(xí)下。2018-09-09
在本文中，我們學(xué)習(xí)了如何使用 Intersection Observer API 和?defineAsyncComponent?函數(shù)在 Vue 組件可見(jiàn)時(shí)對(duì)其進(jìn)行懶加載，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友一起看看吧2023-09-09
解決element-ui的下拉框有值卻無(wú)法選中的情況
這篇文章主要介紹了解決element-ui的下拉框有值卻無(wú)法選中的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開(kāi)發(fā)樹(shù)形菜單結(jié)構(gòu)，el-tree組件中filter-node-method事件便可以實(shí)現(xiàn)樹(shù)形菜單篩選過(guò)濾功能，需要的朋友可以參考下2022-04-04
在本篇文章里小編給大家分享了關(guān)于vue組件中使用路由的詳細(xì)步驟內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
vuex 實(shí)現(xiàn)getter值賦值給vue組件里的data示例
今天小編就為大家分享一篇vuex 實(shí)現(xiàn)getter值賦值給vue組件里的data示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用
這篇文章主要介紹了淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02