vue3中使用scss加上scoped導(dǎo)致樣式失效問(wèn)題
使用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ò),但是沒(méi)有用)
- 在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>直接另寫(xiě)一個(gè)<style></style>標(biāo)簽就行了啊,千萬(wàn)不要再加scoped了哈.
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue v-for 遍歷循環(huán)時(shí)key值報(bào)錯(cuò)的問(wèn)題
今天小編就為大家分享一篇解決vue v-for 遍歷循環(huán)時(shí)key值報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue data變量相互賦值后被實(shí)時(shí)同步的解決步驟
這篇文章主要介紹了vue data變量相互賦值后被實(shí)時(shí)同步的解決步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
在Vue中獲取自定義屬性方法:data-id的實(shí)例
這篇文章主要介紹了在Vue中獲取自定義屬性方法:data-id的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue/cli3.0腳手架部署到nginx時(shí)頁(yè)面空白的問(wèn)題及解決
這篇文章主要介紹了vue/cli3.0腳手架部署到nginx時(shí)頁(yè)面空白的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue中動(dòng)態(tài)Class實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了Vue中動(dòng)態(tài)Class的實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
Vue Echarts實(shí)現(xiàn)可視化世界地圖代碼實(shí)例
這篇文章主要介紹了Vue Echarts實(shí)現(xiàn)可視化世界地圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue3通過(guò)父子傳值實(shí)現(xiàn)彈框功能
在Vue3中,我們可以通過(guò)?provide?和?inject?來(lái)實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞,這也適用于實(shí)現(xiàn)彈框功能,下面我們就來(lái)學(xué)習(xí)一下vue3實(shí)現(xiàn)彈框功能的具體方法吧2023-12-12
Vue.js是JavaScript MVVM（Model-View-ViewModel）庫(kù)，十分簡(jiǎn)潔，Vue核心只關(guān)注視圖層，相對(duì)AngularJS提供更加簡(jiǎn)潔、易于理解的API。接下來(lái)通過(guò)本文給大家介紹vue的基本用法與常見(jiàn)指令，感興趣的朋友一起看看吧2017-08-08
Vue組件庫(kù)Element-常見(jiàn)組件表格示例代碼
對(duì)于Element組件的使用,最主要的就是明確自己想要達(dá)到的效果,從官網(wǎng)中將對(duì)應(yīng)代碼復(fù)制粘貼即可,最重要的是要讀懂不同組件官網(wǎng)中提供的文檔,以便實(shí)現(xiàn)自己想要的效果,本文給大家介紹Vue組件庫(kù)Element-常見(jiàn)組件表格,感興趣的朋友一起看看吧2023-10-10
??Vuex?是一個(gè)專為?Vue.js?應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)。本文會(huì)通過(guò)一些簡(jiǎn)單的示例，為大家詳細(xì)講解Vuex的使用，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-11-11