el-autocomplete修改默认样式不生效问题（已解决）

小半 • 2023年1月18日下午6:19 • 前端开发 • 阅读 395

问题：修改el-autocomplete 默认样式重写覆盖使用深度选择器也还是没有解决问题

原因：发现渲染后的dom元素不在#app元素内部。原来是el-autocomplete里面的.el-popper元素渲染后会脱离#app。所以使用深度选择器也无法定位该元素。

解决办法：研究文档发现el-autocomplete组件自带的一个属性可以解决问题

方法如下：
在el-autocomplete 上增加一个属性:popper-append-to-body=“false”，这个属性用于将渲染后的元素放入#app元素。

代码：

 :popper-append-to-body="false"

添加该属性完成后，再使用深度选择器修改就可以了
参考博文：https://blog.csdn.net/qq_44747461/article/details/106140453
css 代码示例：（我这里是需要改下拉框的背景颜色以及选中某一项的字体颜色0 ~）

::v-deep .el-popper {
  background: #2b2c2c !important;
  border: 1px solid #2b2c2c !important;
}
::v-deep .el-autocomplete-suggestion__list :hover {
  color: #aaaaaa !important;
}

总结：
1.将<style lang="scss" scope>中的scope去掉，此时变为全局的样式，为了确保其他单页面中相应元素的样式不会随之改变，需要用当前的父级定位该元素，即在其父级上添加一个class，在修改对应的子元素样式，并且再刷新浏览器（重要！），才能生效。（作为修改样式的首选）
2.（不推荐使用/deep/深度选择器，因为只适用于chrome浏览器，存在浏览器兼容问题），因为我这边是项目封装了一个全局样式文件 使用的就是deep 所以就没有改动呢~
3.示例：修改el-date-picker样式：
增加popper-class 设置新的样式如：popper-class="date-style"