Vue里父组件如何修改子组件样式

在使用Vue开发过程中，我们有时会用到一些外部组件，如ElementUI、Vant等。

使用这些外部组件的过程中，你有没有遇到过这种情况：有时候我们需要对该组件的样式做一些调整，但在调用该组件的父页面怎样修改样式，都看不到变化。

这是为什么呢？

一般我们在Vue写style的时候，都会给<style>标签添加scoped属性，让css只作用域当前组件中的元素，避免了污染全局样式。

但是在父组件中添加scoped之后，父组件的样式将不会渗透到子组件中，所以在父组件中写子组件的样式是无效果的。

那么要如何做才能在父组件修改子组件的样式呢？

一、去掉scoped

去掉scoped之后，父组件中可以书写子组件的样式，当然，此时该组件中的样式就是全局样式了。

该方法不是特别推荐，正确的使用全局样式应该是使用一个全局的app.css。

二、混用本地和全局样式

可以在一个组件中同时使用有作用域和无作用域的样式：

<style>/*全局样式*/</style><style scoped>/*当前组件样式*/</style>

将需要修改子组件的样式写正在上面那个全局样式里面。

三、使用深度作用选择器

如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以用 >>> 操作符：

<style scoped>.parent >>> .child {  /* ... */}</style>

有些像SASS之类的预处理器无法正确解析 >>>，这种情况下我们可以用 /deep/ 操作符替换：​​​​​​​

<style scoped>.parent /deep/ .child {  /* ... */}</style>