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
