修改elementUI el-select 下拉框修改样式不生效问题

原创已于 2023-01-05 11:13:43 修改 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

于 2023-01-05 11:11:27 首次发布

文章讲述了在遇到修改组件背景色无效的情况下，通过移除scoped属性和使用/deep/选择器尝试解决问题，但未成功。最终解决方案是移除scoped并直接编写全局CSS样式，从而实现对.el-select-dropdown__list等组件样式的修改。

问题描述

想修改这个背景色不生效，代码如下

<style scoped>
/deep/ .el-select-dropdown__list {
  background-color: #1f2f6d !important;
}
/deep/ .el-select-dropdown {
  border: 1px solid #409eff;
}
/deep/ .el-select-dropdown__item {
  color: white;
}
/deep/ .el-select-dropdown__item.hover {
  background-color: #3f4f98;
}
</style>

在这里插入图片描述

解决方法

新加下面代码 ( 去除scoped 和/deep/. )

<style >
 .el-select-dropdown__list {
  background-color: #1f2f6d !important;
}
.el-select-dropdown {
  border: 1px solid #409eff;
}
 .el-select-dropdown__item {
  color: white;
}
 .el-select-dropdown__item.hover {
  background-color: #3f4f98;
}
</style>