Vue模板內引入的組件樣式覆蓋失效原因及解決
模板內引入組件樣式覆蓋失效
作為一名剛接觸Vue的菜鳥, 開發(fā)過程中遇到一些小坑又很難搜索的到, 還是記錄下來. 分享給有遇到過類似問題的人.
Vue項目中假設用到Vant.js這個UI庫, 具體引入組件啥的我就不詳細說了, 直接看代碼:
<template>
? <div class="login">
? ? <my-btn type="default">{{msg}}</my-btn>
? </div>
</template><script>
import { Button } from 'vant'
export default {
? name: 'App',
? components: {
? ? myBtn: Button
? },
? data() {
? ? return {
? ? ? msg: 'whidy is poor XD'
? ? }
? }
}
</script><style scoped>
.van-button {
? width: 600px;
}
.van-button__text {
? font-size: 40px;
}
</style>以上代碼的寫法不仔細看的話, 通過頁面來看, my-btn組件實際上是Button, 而Vant的Button會生成類似如下:
<button data-v-0f984ad8="" class="van-button van-button--default van-button--normal"><!----><span class="van-button__text">whidy is poor XD</span></button>
其中的van-button的確寬度變成600px了, 而這個van-button__text卻沒有反應. 似乎一下子就傻眼了. 去掉scoped才有效果, 可是為啥要把這個作用域去了才行. 這個不符合我們需求, 因為這樣會造成全局污染. 我僅僅是想要在這個頁面中的按鈕文本字體發(fā)生改變!
問題原因
scoped是必不可少的, 但是我寫了這個樣式為何無法生效? 原因很簡單, 因為當前樣式僅適用于當前Vue模板的, 而模板中引入的其他組件其實是無法被渲染的.
解決方案
因此對于模板中引入第三方UI框架的樣式如何改寫, 正確方式是寫一個優(yōu)先級高于原組件的全局樣式來覆蓋默認樣式, 比如
<my-btn type="default" class="reset">{{msg}}</my-btn>完整的代碼如下
<template>
? <div class="login">
? ? <my-btn type="default" class="reset">{{msg}}</my-btn>
? </div>
</template><script>
import { Button } from 'vant'
export default {
? name: 'App',
? components: {
? ? myBtn: Button
? },
? data() {
? ? return {
? ? ? msg: 'whidy is poor XD'
? ? }
? }
}
</script><style scoped>
.van-button {
? width: 600px;
}
</style>
<style>
.reset .van-button__text {
? font-size: 40px;
}
</style>當然這里只是示例, 個人并不建議在模板上寫多個style塊, 所以我的做法一般還是在assets目錄內新建一個例如resetui.css文件, 專門存放這些需要被重新修改的樣式代碼. 并且以組件的類名來進行維護, 比如上面一段, 最后處理好的代碼應該是引入一個全局resetui.css, 并且該文件內的樣式(我用了PostCSS)例如:
.login {
? .van-button__text {
? ? font-size: 40px;
? }
}這樣就很好的解決了作用域和組件樣式的問題了, 因此理解Vue模板和組件之間的作用域也是至關重要的~
其實這部分內容在官方文檔有寫, 不過大部分新手在閱讀文檔后, 并沒有真正實踐, 所以也就很容易忽略, 這里簡單的做了個總結, 希望大家能夠注意哦~
我其實也很想能夠做到, 當前模版內的scoped樣式能夠生效于當前模版內的所有組件的辦法, 不過似乎是做不到的? 因此目前還是暫時按照上面的解決方案處理吧~
參閱: 官方文檔 - Class與Style綁定 - 用在組件上
vue樣式被覆蓋問題
在我們引入外部的樣式時，發(fā)現(xiàn)自己無論如何都改不了外部的樣式，自己的樣式老被覆蓋，究其原因還是我們的 外部樣式放的位置不對
main.js
我們應該在 main.js 的開頭引入樣式，這樣的話就不存在覆蓋的問題了
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了詳解vue3中渲染函數的非兼容變更，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要介紹了Vue Build后的項目的根路徑配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
最近在做APP客戶端掃描PC端二維碼登錄,于是記錄一下實現(xiàn)過程,下面這篇文章主要給大家介紹了關于Vue?PC前端掃碼登錄功能實現(xiàn)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue子組件監(jiān)聽父組件值的變化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了基于axios請求封裝的vue應用的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
本篇文章主要介紹了vue mint-ui學習筆記之picker的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
本文介紹了如何使用Vue實現(xiàn)下拉框的多選功能,實現(xiàn)了在選擇框中選擇多個選項的功能,文章詳細介紹了實現(xiàn)步驟和示例代碼,對于想要了解如何使用Vue實現(xiàn)下拉框多選功能的讀者具有一定的參考價值2023-08-08
這篇文章主要介紹了vue中的axios和slot，文中代碼非常詳細，對大家的工作學習有所幫助，感興趣的朋友可以參考下2020-06-06
本篇文章主要介紹了vue.js獲取數據庫數據實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vue?css?相對路徑導入問題級踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06