修改 mint ui 元件的預設樣式

2021-09-12 21:48:05 字數 410 閱讀 2374

使用 mint-ui 可以方便實現很多特有的樣式,可以很方便的進行呼叫,但如果 mint-ui 的預設樣式與要求不一致時該如何修改?

比如 mint-ui 中有乙個輪播圖屬性 mt-swipe,其預設樣式如下:

.mint-swipe-items-wrap
如果要實現該區域 height 有乙個特定值,如 height: 120px,直接在元件中設定是不會生效的,此時我們可以參考如下的方法:

1.建立 .styl 檔案( 在 vue 中使用 stylus 語法編寫樣式,其他語法也可自行進行合適修改 );

2.樣式中的內容為:

.mint-swipe-items-wrap

height: auto

3.在元件中引入該樣式即可

修改mint ui中元件的樣式

在static資料夾下建立乙個mint ui.scss的檔案 隨後在瀏覽器檢查元素找到這個元素的class,並在那個mint ui.scss檔案裡面重新寫你的樣式 要是權重不夠直接important 再者就是在main.js中引入這個檔案 引入更改的mint ui控制項樣式 import stati...

input type date 預設樣式修改

最近寫乙個頁面,用到了date型別的input,不得不說,挺好用的,免去了額外引入第三方外掛程式的麻煩,但與此同時,也出現了新的麻煩,那就是input type date 自帶的一些樣式,比如刪除icon,上下箭頭等等,著實讓人頭疼,下面我介紹下幾種去除此類樣式的方法。date value 1993...

修改Element預設樣式

當我們在vue中引入第三方元件庫的時候,vue元件中樣式的scoped就會成為我們修改樣式的阻礙,有以下三種方法修改樣式,並且不影響全域性樣式 1 在樣式外新增乙個樣式不新增scoped 2 使用deep樣式穿透 less sass的處理方法 3 使用 穿透 stylus的穿透方式 4 有些樣式是行...