发现这个主要是因为业务需要修改elementui的样式时我的css不生效
首先写了个测试页面发现能修改样式,(element的el-input是封装过的,所以要修改input的样式需要在F12调试页面找到相应的标签),但是组件style没有加scoped容易影响全局样式,所以一般组件我们都需要加上scoped避免组件样式污染全局样式
加上了scoped之后可以发现整个组件的所有标签都加上了唯一标识,因为input是封装在el-input内部的所以没有,但是看样式显示对于input背景的修改是需要通过Input[data-v-5752faac]来定位这个标签并修改样式的,所以我们的css样式已经没法定位到这个input标签了(即无法命中这个标签),所以我们想要修改input的样式就需要引入vue的样式穿透
通过在.el-input前面加上:deep()进行样式穿透,我们就可以命中input标签并且成功修改样式了
Q.E.D.