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

作為一名剛接觸Vue的菜鳥(niǎo), 開(kāi)發(fā)過(guò)程中遇到一些小坑又很難搜索的到, 還是記錄下來(lái). 分享給有遇到過(guò)類(lèi)似問(wèn)題的人.

Vue項(xiàng)目中假設(shè)用到Vant.js這個(gè)UI庫(kù), 具體引入組件啥的我就不詳細(xì)說(shuō)了, 直接看代碼:

<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>

以上代碼的寫(xiě)法不仔細(xì)看的話, 通過(guò)頁(yè)面來(lái)看, my-btn組件實(shí)際上是Button, 而Vant的Button會(huì)生成類(lèi)似如下:

<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了, 而這個(gè)van-button__text卻沒(méi)有反應(yīng). 似乎一下子就傻眼了. 去掉scoped才有效果, 可是為啥要把這個(gè)作用域去了才行. 這個(gè)不符合我們需求, 因?yàn)檫@樣會(huì)造成全局污染. 我僅僅是想要在這個(gè)頁(yè)面中的按鈕文本字體發(fā)生改變!

問(wèn)題原因

scoped是必不可少的, 但是我寫(xiě)了這個(gè)樣式為何無(wú)法生效? 原因很簡(jiǎn)單, 因?yàn)楫?dāng)前樣式僅適用于當(dāng)前Vue模板的, 而模板中引入的其他組件其實(shí)是無(wú)法被渲染的.

解決方案

因此對(duì)于模板中引入第三方UI框架的樣式如何改寫(xiě), 正確方式是寫(xiě)一個(gè)優(yōu)先級(jí)高于原組件的全局樣式來(lái)覆蓋默認(rèn)樣式, 比如

<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>

當(dāng)然這里只是示例, 個(gè)人并不建議在模板上寫(xiě)多個(gè)style塊, 所以我的做法一般還是在assets目錄內(nèi)新建一個(gè)例如resetui.css文件, 專(zhuān)門(mén)存放這些需要被重新修改的樣式代碼. 并且以組件的類(lèi)名來(lái)進(jìn)行維護(hù), 比如上面一段, 最后處理好的代碼應(yīng)該是引入一個(gè)全局resetui.css, 并且該文件內(nèi)的樣式(我用了PostCSS)例如:

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

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

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

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

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

vue樣式被覆蓋問(wèn)題

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

main.js

我們應(yīng)該在 main.js 的開(kāi)頭引入樣式，這樣的話就不存在覆蓋的問(wèn)題了

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

最新評(píng)論