Vue 父组件更改子组件样式

White feathe

发布于 2022-05-11 10:29:36

2.3K0

文章被收录于专栏：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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022/05/05 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

css

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

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

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

css

登录后参与评论

0 条评论

热度

Vue 父组件更改子组件样式

Vue 父组件更改子组件样式

解决方案：

1、去除`scoped` （不推荐）

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

Vue2 使用

Vue3 使用

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

Vue 父组件更改子组件样式

Vue 父组件更改子组件样式

解决方案：

1、去除scoped （不推荐）

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

Vue2 使用

Vue3 使用

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

1、去除`scoped` （不推荐）

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