Vue 父组件更改子组件样式

原创

White feathe

修改于 2022-05-05 16:20:04

1.7K0

修改于 2022-05-05 16:20:04

文章被收录于专栏：White feathe 的博客White feathe 的博客

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

登录后参与评论

0 条评论

热度