vue中style設(shè)置scoped后部分樣式不生效的解決
vue中style設(shè)置scoped后部分樣式不生效
因?yàn)橛昧薳lementUI的組件庫(kù)，一個(gè)頁面用到了el-dialog，需要改一下樣式，但<style>中設(shè)置了scoped后樣式并不生效。
因?yàn)関ue的scoped為本組件的所有標(biāo)簽都打上了一個(gè)唯一attribute，樣式生效時(shí)也帶上了這唯一的attribute，但是本組件應(yīng)用的所有子組件，除根標(biāo)簽以為其他都未打上這唯一標(biāo)簽，因此樣式自然不會(huì)生效。
vue 自動(dòng)添加一個(gè)唯一的 attribute
添加了唯一的attribute，這也就是vue scoped 實(shí)現(xiàn)樣式隔離的原理。
如果不怕影響別的頁面的話把scoped刪掉之后樣式即可生效。
不刪除scoped的解決辦法
查了一下官方解決辦法
vue官方給出的解決辦法是： 深度作用選擇器
<style scoped>
::v-deep .el-dialog {
background-color: #0c1d3f;
}
</style>還可以用/deep/、 >>>、::v-deep。
/deep/在vue 3.0會(huì)報(bào)錯(cuò)，可使用::v-deep
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了OpenDataV低代碼平臺(tái)新增組件流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue中表格設(shè)置某列樣式、不顯示表頭問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解實(shí)現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理
這篇文章主要介紹了詳解實(shí)現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
elementui?el-table底層背景色修改簡(jiǎn)單方法
最近在做項(xiàng)目的時(shí)候遇到個(gè)需求,需要修改el-table背景色,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于elementui?el-table底層背景色修改的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了詳解如何用VUE寫一個(gè)多用模態(tài)框組件模版，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
Vue使用provide各種傳值后inject獲取undefined的問題及解決
這篇文章主要介紹了Vue使用provide各種傳值后inject獲取undefined的問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)方法
這篇文章主要給大家介紹了el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)的相關(guān)資料,每個(gè)表單el-form由多個(gè)表單域el-form-item組成,需要的朋友可以參考下2023-09-09
Vue引入路徑正確但一直報(bào)錯(cuò)問題:Already included file name&n
這篇文章主要介紹了Vue引入路徑正確但一直報(bào)錯(cuò):Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換)
這篇文章主要介紹了el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-02-02
詳解vue-template-admin三級(jí)路由無法緩存的解決方案
這篇文章主要介紹了vue-template-admin三級(jí)路由無法緩存的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03