1.前言：不是正經的前端，所以很多東西無法注意和知道，就知道一點記錄一點好了。

2.之前想修改mint-ui的樣式，但是官方文檔絲毫未提及（也許前端人員都知道如何修改???）,后面通過兩種方式可以進行mint-ui的樣式修改，這兩種方式都是通用的，不限于mint-ui.

3.方式一：使用Chrome開發者工具查看css的使用，找到class的名字，然后就可以使用了？？？

4.方式二：mint-ui的組件直接當成普通html組件使用，樣式該加就加，然后加個！important標記，覆蓋掉原來的樣式。

--------------------------------------------------2018年8月30日更新

1.修改樣式的核心是：自己寫的樣式優先級>第三方組件樣式

以此為原則：1)使用！important提升優先級 2)main.js映入第三方組件后面，引入自定義的樣式表，webpack打包后樣式會覆蓋

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: 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樣式

總結

以上是生活随笔為你收集整理的mint-ui修改样式的小技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。