vue的scope導致樣式修改不了問題

2021-10-07 11:45:41 字數 608 閱讀 2471

如果你在用vue開發,你一定用過它css的scoped屬性,你會發現當你新增scope屬性以後,有時候修改樣式變得很費勁有木有?

這裡先說一下scoped的原理:

再新增scoped以後,大致可以看成做了兩步操作

給html的dom節點加乙個不重複data屬性(形如:data-***)來表示他的唯一性

在每句css選擇器的末尾(編譯後的生成的css語句)加乙個當前元件的data屬性選擇器(如[data-***])來私有化樣式

大家都知道css樣式有乙個優先順序的說法,scoped的這一操作,雖然達到了元件樣式模組化的目的,但是會造成一種後果:每個樣式的權重加重了:理論上我們要去修改這個樣式,需要更高的權重去覆蓋這個樣式。這是增加複雜度的其中乙個維度。

然後就是你想修改樣式的時候 得頻繁的寫!important有木有?關鍵是low就不說有時候還不好使,苦不堪言。

當最簡單粗暴的方法就是不新增scoped屬性(屢試不爽)

接下來告訴大家乙個高大上的方法,你不用寫!important,也不用刪掉scoped,你只需在選擇器前加個/deep/即可

.add-student

}

vue中樣式scope的坑

vue中給dom加樣式是同過屬性選擇器來加的,所以會在mouted給每個dom標籤 不太懂 加乙個data 而很多的外掛程式都是在mouted後操作dom所以未能給新生成的dom 元素加data 導致在屬性選擇器加樣式時不能起作用,因為後來的新生成的標籤根本被選中類樣式,處理辦法,1.去掉 元件st...

vue檔案引入全域性樣式導致樣式重複

通常專案中src下的子目錄都會有乙個style資料夾,專門用來存放全域性的樣式檔案。這個style資料夾下,一般有reset.css var.scss mixin.scss class.scss index.scss 一般都會在index.scss檔案中引入其他檔案做統一管理,並在main.js中引...

vue 新修改element ui的樣式

element ui樣式是很難修改的。修改 滾動條樣式 data tabledata height 250 border class your table style width 100 prop date label 日期 width 180 el table column el table cs...