vue3中使用scss加上scoped導(dǎo)致樣式失效問題
使用scss加上scoped導(dǎo)致樣式失效
在vue3 中給style標(biāo)簽加上scoped 的時(shí)候自定義第三方ui框架樣式不生效的解決方案
給樣式加上 /deep/ >>> 或 ::v-deep
.ant-layout-header { ? .ant-menu::v-deep .ant-menu-item-selected { ? ? background-color: #fff; ? } }
注意事項(xiàng)
- 在 scss中不支持使用 /deep/ (會(huì)報(bào)錯(cuò))
- 在 scss中使用 >>>不生效 (不報(bào)錯(cuò),但是沒有用)
- 在scss中可以使用::v-deep
在vue3 + vite 中使用 :: v-deep 拋出警告
:v-deep usage as a combinator has been deprecated. Use :deep() instead.
解決辦法 使用 :deep()
? :deep(.ant-menu) { ? ? .ant-menu-item-selected { ? ? } ? ? .ant-menu-item:hover { ? ? } ? ? &.ant-menu-dark { ? ? } ? }
vue中加樣式失效,scoped穿透你需要了解一下
1.什么是scoped
在Vue文件中的style標(biāo)簽上有一個(gè)特殊的屬性,scoped。
當(dāng)一個(gè)style標(biāo)簽擁有scoped屬性時(shí)候,它的css樣式只能用于當(dāng)前的Vue組件,可以使組件的樣式不相互污染。
如果一個(gè)項(xiàng)目的所有style標(biāo)簽都加上了scoped屬性,相當(dāng)于實(shí)現(xiàn)了樣式的模塊化。
2.scoped穿透
scss的樣式穿透,在樣式的選擇器前加上 /deep/
<style lang="scss" scoped> ? ? /deep/.el-scrollbar__wrap{ ? ? ? ? overflow-x: hidden; ? ? } </style>
3.另一種方式實(shí)現(xiàn)穿透的效果
<style lang="scss"> ? ? .el-scrollbar__wrap{ ? ? ? ? overflow-x: hidden; ? ? } </style>
直接另寫一個(gè)<style></style>標(biāo)簽就行了啊,千萬不要再加scoped了哈.
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3+ts+echarts實(shí)現(xiàn)按需引入和類型界定方式
這篇文章主要介紹了vue3+ts+echarts實(shí)現(xiàn)按需引入和類型界定方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10VUE項(xiàng)目自動(dòng)檢測(cè)服務(wù)端是否發(fā)布了新版本
本文主要介紹了VUE項(xiàng)目自動(dòng)檢測(cè)服務(wù)端是否發(fā)布了新版本,通過輪詢方式檢測(cè)Vue項(xiàng)目新版本并提示用戶刷新頁面,具有一定的參考價(jià)值,感興趣的可以了解一下2025-01-01vue+swiper實(shí)現(xiàn)時(shí)間軸效果
這篇文章主要為大家詳細(xì)介紹了vue+swiper實(shí)現(xiàn)時(shí)間軸效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離
這篇文章主要為大家詳細(xì)介紹了Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作
這篇文章主要介紹了vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue3.0基于views批量實(shí)現(xiàn)動(dòng)態(tài)路由的方法(示例代碼)
以前vue項(xiàng)目中也有很多實(shí)現(xiàn)動(dòng)態(tài)路由的方法,比如有一些項(xiàng)目涉及權(quán)限的可能會(huì)使用api請(qǐng)求路由數(shù)據(jù)在來createRouter,或者本地構(gòu)建使用routes.push來動(dòng)態(tài)構(gòu)建路由, 今天介紹一種新的方式來基于某個(gè)文件夾批量構(gòu)建動(dòng)態(tài)路由的方法,感興趣的朋友一起看看吧2024-12-12