ELEMENT UI如何对下拉框列表的样式进行修改(自定义样式覆盖第三方组件样式)?

目前用了element ui的 el-autocomplete 组件远程检索的下拉框
效果如下:因为对字体的大小和背景颜色不太满意想自己修改一下
image.png

查询了官方文档,捣鼓了一下以失败而告终,下面贴代码

                  <el-autocomplete
                    :trigger-on-focus="false"
                    style="width:100%"
                    v-model="form.xxx"
                    :fetch-suggestions="getSmbxMessxage"
                    placeholder="请输入xxx包路径"
                    clearable
                    autocomplete
                    popper-class="my-autocomplete"
                    popper-append-to-body="false"
                  >
                    <template slot-scope="{ item }">
                      <div class="package-path-value">{{ item.value }}</div>
                      <span class="package-path-name">{{ item.name }}</span>
                    </template>
                  </el-autocomplete>

css样式代码如下

<style lang="scss"  scoped >

/deep/.my-autocomplete {
  li {
    line-height: normal;
    padding: 4px;
    background-color: aqua;

    .package-path-value {
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 8px;
    }
    .package-path-name {
      font-size: 10px;
      color: lightcoral;
    }
  }
}
</style>

这时发现 没有任何改变

但是当再写一个style 上面不用scoped关键字修饰就可以

问题又来了,如果不加scoped关键字 就会造成全局样式污染

生与死的两难,请问大佬,我该如何抉择

已解决 悬赏分:0 - 解决时间 2021-11-29 07:44
反对 0举报 0 收藏 0

回答2

最佳
  • @

    因为下拉框的popper不是在组件内生成 而是在body直接上append dom 所以scoped不会生效

    可以用固定全局类名 + popper-class

    https://element.eleme.cn/#/zh...


    或者试试popper-append-to-body的正确用法

    :popper-append-to-body="false"
    支持 0 反对 0 举报
    2021-11-28 11:25
  • @

    1.不加scoped
    你可以在它的父级加一个名字比较特殊的class,以用命名空间来解决问题。
    2.加scoped
    使用深度作用选择器。

    <style scoped>
    .a >>> .b {  }
    </style>
    支持 0 反对 0 举报
    2021-11-28 12:28