Vue修改mint-ui默認(rèn)樣式的方法
更新時間：2018年02月03日 15:43:43 作者：蘭色的fire
下面小編就為大家分享一篇Vue修改mint-ui默認(rèn)樣式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在使用vue框架開發(fā)時，餓了么的mint-ui框架是個不錯的選擇，但是有時候我們需要修改它的默認(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)樣式的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用localStorage保存登錄信息 適用于移動端、PC端
這篇文章主要為大家詳細(xì)介紹了vue使用localStorage保存登錄信息 適用于移動端、PC端，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了Element Steps步驟條的使用方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了Ant Design Pro 菜單自定義 icon，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue內(nèi)置動態(tài)組件component使用示例小結(jié)
component是vue內(nèi)置組件,主要作用為動態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動態(tài)組件component使用示例小結(jié),需要的朋友可以參考下2024-03-03
Vue中如何點(diǎn)擊獲取當(dāng)前元素下標(biāo)
這篇文章主要介紹了Vue中如何點(diǎn)擊獲取當(dāng)前元素下標(biāo)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了關(guān)于Vue3中的響應(yīng)式原理，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue+Bootstrap收藏（點(diǎn)贊）功能邏輯與具體實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap收藏（點(diǎn)贊）功能邏輯與具體實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
vue3+vite使用環(huán)境變量.env的一些配置情況詳細(xì)說明
開發(fā)中經(jīng)常會使用環(huán)境變量,Vite相比于Webpack也有一定的變化,下面這篇文章主要給大家介紹了關(guān)于vue3+vite使用環(huán)境變量.env的一些配置情況說明的相關(guān)資料,需要的朋友可以參考下2022-12-12
Vue實(shí)現(xiàn)搖一搖功能(兼容ios13.3以上)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)搖一搖功能，兼容ios13.3以上，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
Vue初始化中的選項(xiàng)合并之initInternalComponent詳解
這篇文章主要介紹了Vue初始化中的選項(xiàng)合并之initInternalComponent的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06