Vue修改mint-ui默認(rèn)樣式的方法

發(fā)布時(shí)間：2020-08-28 10:15:05 來(lái)源：腳本之家閱讀：234 作者：蘭色的fire 欄目：web開(kāi)發(fā)

在使用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è)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

Vue修改mint-ui默認(rèn)樣式的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽