CSS相关问题

第三方组件样式修改不生效问题

问题背景：由于el-select组件下拉选项被弹窗遮挡，需要修改el-select-dropdown的z-index。但是，el-select和弹窗都封装在自定义公共组件里，如果修改公共组件，需要使大家都进行升级；加之这个组件在全平台的引用较少，所以想尝试在页面内进行修改。这样便出现了题目中组件样式修改不生效的问题。

方法一 非scoped

暴力解决，直接在style中通过类选择器进行样式修改。

• 理解：根据文档可知，vue可以混用本地和全局样式，因此对子组件的非根元素样式修改，可以单独放在一个非 scoped 样式中（转，目前我尚未理解）

• 优点：简单快捷

• 缺点：会影响其他页面的组件样式

<style>
.el-select-dropdown {
	z-index: 9999!important;	
}
</style>

这种方法是唯一生效的方式，我也很好奇为什么下面的几种方法不生效，期待大家的见解。

方法二 /deep/深度修改

使用 /deep/ 可以使组件的样式渗透到子组件

• 优点：避免污染其他组件
• 缺点：有时会报错，或仍然不生效

<style lang="less" scoped>
/deep/ .el-select-dropdown {
	z-index: 9999!important;
}
</style>

奇怪的是，我用上面的方法并没有生效。

方法三 <<< 深作用选择器

• 缺点：只能用在原生CSS中，不能在CSS预处理器如less、scss中直接使用

<style scoped>
<<< .el-select-dropdown {
	z-index: 9999!important;
}
</style>

参考文章

1. vue中修改第三方组件的样式不生效
2. element组件中自定义组件的样式不生效问题(vue scoped scss无效)