vue項目中很多頁面class名稱一樣導致樣式錯亂的解決辦法

項目中經常子組件被引入父組件,有時候父頁面會出現錯亂樣式,原因就是同名元素選擇器互相影響,其他頁面的樣式影響了當前頁面的樣式,可以參考以下解決方式:

1.在style標籤中寫scoped

2.在style不用寫scoped,但是最外層的div的class或者id必須是整個項目來看都是唯一的

最外層的選擇器+空格+元素本身的選擇器寫樣式,當然由於每個元素前面都寫太麻煩可以使用less,stylus,scss寫樣式,嵌套就只需要寫一次最外層的樣式,注意在style元素裏面寫lang="scss"之類的避免vscode高亮報錯.

3.當遇到要修改前端ui框架的class樣式或者涉及修改子組件的樣式:

1)將scoped去掉

最外層class或者id+空格+該元素的ui框架的class寫樣式覆蓋

2)使用>>>或者/deep/

stylus可以使用>>>,sass解析不了>>>就使用/deep/

<style lang="stylus" scoped>
.container >>> .swiper-container
    overflow: inherit//規定應該從父元素繼承 overflow 屬性的值。
    position: relative
.container
    display: flex
    flex-direction: column

後面的代碼省略....
</style>

<style lang="scss" scoped>
.a {
	color: #333;
	/deep/ .ui-b {
		color: red;
	}
}

後面的代碼省略....
</style>