模板內(nèi)引入組件樣式覆蓋失效

作為一名剛接觸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目錄內(nèi)新建一個例如resetui.css文件, 專門存放這些需要被重新修改的樣式代碼. 并且以組件的類名來進行維護, 比如上面一段, 最后處理好的代碼應該是引入一個全局resetui.css, 并且該文件內(nèi)的樣式(我用了PostCSS)例如:

.login {
? .van-button__text {
? ? font-size: 40px;
? }
}

這樣就很好的解決了作用域和組件樣式的問題了, 因此理解Vue模板和組件之間的作用域也是至關重要的~

其實這部分內(nèi)容在官方文檔有寫, 不過大部分新手在閱讀文檔后, 并沒有真正實踐, 所以也就很容易忽略, 這里簡單的做了個總結, 希望大家能夠注意哦~

我其實也很想能夠做到, 當前模版內(nèi)的scoped樣式能夠生效于當前模版內(nèi)的所有組件的辦法, 不過似乎是做不到的? 因此目前還是暫時按照上面的解決方案處理吧~

參閱: 官方文檔 - Class與Style綁定 - 用在組件上

vue樣式被覆蓋問題

在我們引入外部的樣式時，發(fā)現(xiàn)自己無論如何都改不了外部的樣式，自己的樣式老被覆蓋，究其原因還是我們的 外部樣式放的位置不對

main.js

我們應該在 main.js 的開頭引入樣式，這樣的話就不存在覆蓋的問題了

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論