vue不操作dom修改元素样式_vue中修改第三方组件的样式不生效

问题

在使用element-ui时，有时候想要修改组件内的样式，但不成功，例如

按钮

.test{

.el-button span{

background:red;

}

}

以上对.el-button span的样式不生效

问题的原因

想要找到解决方案，我们先来看看不生效的原因。 1)首先，scoped是如何实现局部样式的？ 查看vu-loader文档，根据文档可以知道，当

仔细阅读这句话，也就是说采用scoped后，对组件A内采用的子组件，只会对其根元素加上组件A的独特标签，因此对子组件的根元素改变样式能生效，而对非根元素是不生效的。因此上面的例子如果改为对根元素.el-button修改样式，就会生效

.test{

.el-button{

background:red;

}

}

可以看下具体的dom元素，如图

上图中data-v-5752faac是当前组件test的独特标签(其他是父元素带上的，这里忽略)，可以看到子组件el-button的根元素带上了此标签，而非根元素span没带上，因此对span的修改是不生效的，此时如果手动在span元素上加上data-v-5752faac，会发现样式生效 3)不仅限于第三方组件 从上面的分析来看，其实不仅限于第三方组件，任何采用到的子组件，只要是想修改子组件的非根元素都是不生效的

解决方案

【方案一】加上一个非scoped样式 根据文档可知，vue可以混用本地和全局样式，因此对子组件的非根元素样式修改，可以单独放在一个非 scoped 样式中

.test{

.el-button span{

background:red;

}

}

/* 本地样式 */

【方案二】采用/deep/ 加上/deep/，组件的样式可以渗透到子组件相应的元素上

.test{

/deep/ .el-button span{

background:red;

}

}