CSS deep in vue

Created
Oct 22, 2021 8:54 AM

某个项目用的 Element UI,但是他这个分页数量选择器的宽度有点问题,日语情况下显示不全

image

查了下文档好像没有定义这个下拉框的参数,只能 override 默认的 css 了。

关于如何覆盖默认 css,感觉最方便的方法应该就是 css 里的 deep 了。首先找到对元素的 css,看下嵌套结构

image

然后直接在 style scoped 里覆盖就行

<style scoped>
  /deep/ .el-pagination .el-select .el-input {
    width: 120px;
  }
</style>

修改完毕

image