前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 父组件更改子组件样式

Vue 父组件更改子组件样式

作者头像
White feathe
发布2022-05-11 10:29:36
1.6K0
发布2022-05-11 10:29:36
举报

Vue 父组件更改子组件样式

代码语言:javascript
复制
<style lang="css" scoped>
  //TODO 
</style>

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

解决方案:

1、去除scoped (不推荐)
代码语言:javascript
复制
<style lang="css">
  .test{
  	background-color: red;
  } 
</style>

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

2、使用lang="css" 提供的 /deep/ 或者 >>> 或者 ::v-deep,如下:
Vue2 使用
代码语言:javascript
复制
<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" 的语法糖

代码语言:javascript
复制
<style lang="scss" scoped>
::v-deep .test{
    background-color: red;
}
</style>
Vue3 使用

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

代码语言:javascript
复制
:deep(.test) {
    padding-top: 14px;
}
3、使用动态变量进行传参,如下:
代码语言:javascript
复制
<Icon :class="{
	backgroundColor:'red';
}">
</Icon>

参考链接:scoped-css

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-05-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决方案:
    • 1、去除scoped (不推荐)
      • 2、使用lang="css" 提供的 /deep/ 或者 >>> 或者 ::v-deep,如下:
        • 3、使用动态变量进行传参,如下:
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档