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