如果想局部地改变element-ui组件的样式,而又不想去除scoped属性,造成组件之间的样式污染。可以通过>>>,穿透scoped。
上代码:
<el-input class="searchInput" v-model="searchInput" clearable placeholder="搜索" prefix-icon="el-icon-search">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
<style scoped>
.searchInput >>> .el-input__inner{
border:0;
}
</style>
增加样式前,效果如下:
左边的搜索框是有边框的。
增加样式后,效果如下:
搜索框边框消失。