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>