vue3中使用scss加上scoped導(dǎo)致樣式失效問題
使用scss加上scoped導(dǎo)致樣式失效
在vue3 中給style標(biāo)簽加上scoped 的時候自定義第三方ui框架樣式不生效的解決方案
給樣式加上 /deep/ >>> 或 ::v-deep
.ant-layout-header { ? .ant-menu::v-deep .ant-menu-item-selected { ? ? background-color: #fff; ? } }
注意事項
- 在 scss中不支持使用 /deep/ (會報錯)
- 在 scss中使用 >>>不生效 (不報錯,但是沒有用)
- 在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)簽上有一個特殊的屬性,scoped。
當(dāng)一個style標(biāo)簽擁有scoped屬性時候,它的css樣式只能用于當(dāng)前的Vue組件,可以使組件的樣式不相互污染。
如果一個項目的所有style標(biāo)簽都加上了scoped屬性,相當(dāng)于實現(xiàn)了樣式的模塊化。
2.scoped穿透
scss的樣式穿透,在樣式的選擇器前加上 /deep/
<style lang="scss" scoped> ? ? /deep/.el-scrollbar__wrap{ ? ? ? ? overflow-x: hidden; ? ? } </style>
3.另一種方式實現(xiàn)穿透的效果
<style lang="scss"> ? ? .el-scrollbar__wrap{ ? ? ? ? overflow-x: hidden; ? ? } </style>
直接另寫一個<style></style>標(biāo)簽就行了啊,千萬不要再加scoped了哈.
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3+ts+echarts實現(xiàn)按需引入和類型界定方式
這篇文章主要介紹了vue3+ts+echarts實現(xiàn)按需引入和類型界定方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue實現(xiàn)兩個組件之間數(shù)據(jù)共享和修改操作
這篇文章主要介紹了vue實現(xiàn)兩個組件之間數(shù)據(jù)共享和修改操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue3.0基于views批量實現(xiàn)動態(tài)路由的方法(示例代碼)
以前vue項目中也有很多實現(xiàn)動態(tài)路由的方法,比如有一些項目涉及權(quán)限的可能會使用api請求路由數(shù)據(jù)在來createRouter,或者本地構(gòu)建使用routes.push來動態(tài)構(gòu)建路由, 今天介紹一種新的方式來基于某個文件夾批量構(gòu)建動態(tài)路由的方法,感興趣的朋友一起看看吧2024-12-12