Vue 父组件更改子组件样式

Vue 父组件更改子组件样式

<style lang="css" scoped>
  //TODO 
</style>

中 scoped 是受保护的，当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装固更改子组件的style时是失效的

---

解决方案：

1、去除scoped （不推荐）

<style lang="css">
  .test{
  	background-color: red;
  } 
</style>

注意：好处是可以替换到子组件样式，坏处是会破坏页面整体变更，.test 会作为一个公共的css，这样是不好的

2、使用lang="css" 提供的 /deep/ 或者 >>> 或者 ::v-deep，如下：

Vue2 使用

<style lang="css" scoped>
/* /deep/  || >>> 来更改子组件样式 */
.icon-style /deep/ .test {
  background-color: red;
}
//或者
.icon-style >>> .test {
  background-color: red;
}
// 或者
.test::v-deep .b { /* ... */ }

</style>

lang="scss" 的语法糖

<style lang="scss" scoped>
::v-deep .test{
    background-color: red;
}
</style>

Vue3 使用 ::v-deep 用作组合器已被弃用。使用 :deep() 代替。

:deep(.test) {
    padding-top: 14px;
}

3、使用动态变量进行传参，如下：

<Icon :class="{
	backgroundColor:'red';
}">
</Icon>

---

参考链接：scoped-css