问题

当给vue组件的style样式加上scoped时, vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局,但如果引用了第三方组件:
默认只会对组件的最外层(div)加入这个 [data-v-xxxx] 属性,但第二层开始就没有效果了。 如图所示: 第一层还有 data-v-635d6c02, 但第二层的就没有了。
在这里插入图片描述
所以,如果你期待通过如下方式修改 input 的样式。是没有任何效果的:

.chooseSearch input{
        }

这是因为,所有的scoped中的css最终编译出来都会变成这样:

.chooseSearch [data-v-xxx] input[data-v-xxx]
解决方法一:除非你将 scoped 移除,或者新建一个没有 scoped 的 style(一个.vue文件允许多个style)
<style scoped>
    .chooseSearch {
        // ...
    }
</style>

<style>
    .chooseSearch input {
        // ...
    }
</style>
解决方法二:深度作用选择器 >>>

(注意,只作用于css)

    .chooseSearch >>> input {
        // ...
    }

但如果是sass/less的话可能无法识别,这时候需要使用 /deep/ 选择器。

   <style lang="scss" scoped>
.chooseSearch{
  width: 100px;
  /deep/ .el-input__inner {
    border: 0;
    color: #000;
  }
}
</style>

Logo

前往低代码交流专区

更多推荐