如何在父组件中设置修改子组件的样式

 

上周去面试，被问到了一个问题，如何在某个vue父组件中去设置子组件的的某一个样式？

以Element-ui为例，我当时使用element-ui的时候，去修改样式是直接在最外部的全局css中去覆盖原有类名的样式，但是这样子做会导致以后修改样式比较麻烦，不方便修改。也有试过把style中的scoped去掉，但是也没办法影响到element-ui的组件样式，而且去掉scoped后，该组件的样式可能会影响到其他组件的样式。

在多方搜索后，在知乎上看到一个大佬给出了一个解决办法。那就是在父组件写css时，样式选择器中加上 /deep/或者 >>> 这两个标记，即可渗透到子组件的样式中。

当然，得vue-loader 11.2.0 才开始支持，官方文档 https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

比如说我要设置el-input的背景颜色，一般这样子去设置，是没有效果的。

但是如果加上/deep/或者>>>后

子组件的样式就被父组件的样式给修改了。

知乎文章地址：https://zhuanlan.zhihu.com/p/29266022 感谢这位大佬