<div class="content">
<el-input v-model="mo" placeholder="输入关键词">
<i slot="suffix" class="el-icon-search"></i>
</el-input>
</div>
在上面,我需要对el-input的样式进行修改
因为在vue中每个组件都需要使用scoped,免得样式污染,所以导致我们不能直接修改组件样式
随之诞生的就是样式穿透(只针对CSS样式)
使用条件:使用一个父元素将需要修改的组件包起来
这里修改placeholder字体样式
.content >>> .el-input__inner::-webkit-input-placeholder {
color:#80c6ce !important;
}
还遇到一个问题,就是我在修改类名的时候使用了input,当然,在使用的时候是.input进行修改样式,效果没起作用,应该是因为有类名就是input,所以应该避免这种事情发生