Vue踩坑之旅（三）—— 修改子组件样式

爱被打了一巴掌 2022-01-12 02:37 1179阅读 0赞

在vue组件中为 `<style>` 标签开启 `scoped` 属性，这样样式只作用于这个组件，而不会污染其他组件。

在项目中，我们经常要引入外部的 UI 组件（如 elementUI、mint-ui），但是在父组件中添加 `scoped` 属性后，父组件的样式将不会渗透到子组件中，所以在父组件中书写子组件的样式是无效果的。

下面有几种方法来修改子组件样式：

### 1. 去掉 scoped ###

在父组件的 `<style>` 中去掉 `scoped` 后，父组件中可以书写子组件的样式。但这样会污染别的组件中的样式

### 2. 混用本地和全局样式 ###

你可以在一个组件中同时使用有作用域和无作用域的样式：

<style lang="sass" scoped> /* 本地样式 */ </style>
    <style lang="sass"> /* 全局样式 * 修改子组件样式，最好在子组件外嵌套一个类 */ </style>
    复制代码

### 3. 深选择器 ###

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<template>
      <div id="app">
        <my-header></my-header>
      </div>
    </template>
    
    <style scoped> .myHeader >>> .title { color: red; } </style>
    复制代码

<div class="myHeader">
      <div class="title"></div>
    </div>
    复制代码

有些像 SASS 之类的预处理器无法正确解析 `>>>`。这种情况下你可以用 `/deep/` 操作符取而代之 —— 这是一个 `>>>` 的别名，同样可以正常工作。

<style scoped> .myHeader /deep/ .title { color: red; } </style>
    复制代码

这样的写法及修改了子组件的样式，又不会污染全局样式！

> 注意：通过 `v-html` 创建的 DOM 内容不受作用域内的样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式

转载于:https://juejin.im/post/5d0b3a5be51d45108c59a54e

发表评论取消回复

表情：

评论列表（有 0 条评论，1179人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular2 父组件中修改子组件样式

情景：父组件FatherComponent中使用了子组件ChildComponent，父组件有自己的css文件，子组件也有自己的css文件，在父组件中修改了子组件的样式，但不起

比眉伴天荒/ 2024年02月19日 12:31/ 0 赞/ 80 阅读

相关 Vue踩坑系列之调用外部组件

![Vue小白登场，踩坑之路实在艰辛。][Vue] 先上图，再说明我想干嘛。。看标题呀，调用外部组件。这里是从App.vue调用外部组件。正确情形： 1. imp

女爷i/ 2023年10月09日 12:35/ 0 赞/ 82 阅读

相关 uni-app踩坑之旅

这里总结的踩坑记录大部分都是app端的兼容问题，H5端基本都不会出现，小程序端还没尝试，后续增加。如有错误，欢迎指正一、环境类 1、h5环境下vue.config.

心已赠人/ 2023年03月03日 14:24/ 0 赞/ 18 阅读

相关 vue里面父组件如何修改子组件样式

文章目录一、去掉 scoped 二、混用本地和全局样式三、使用深度作用选择器在使用 vue 的开发中，我们有时会引用外部组件，包括 UI

骑猪看日落/ 2022年12月21日 10:59/ 0 赞/ 431 阅读

相关 ReactNative 踩坑之旅

样式要从StyleSheet.create创建不要使用如下的样式原因：性能 <Text style={ { ...}}>{ data.smallText

叁歲伎倆/ 2022年12月01日 05:22/ 0 赞/ 211 阅读

相关 Webpack 踩坑之旅

node\_modules包不编译一般情况下，node\_modules安装的包都已经被打包为CommonJS规范的代码，代码的入口文件由包下package.json的

阳光穿透心脏的1/2处/ 2022年11月27日 12:08/ 0 赞/ 239 阅读

相关父组件修改子组件的样式

父组件： Father.vue <template> <Child /> </template> 子组件： Child.v

约定不等于承诺〃/ 2022年11月17日 13:36/ 0 赞/ 231 阅读

相关 Node.js踩坑之旅（一）

我作为一个初学者，在看书写代码的时候难免会遇到一些坑，我想把自己经历的大大小小的一些坑写出来。不仅提醒自己，也是给同处相同学习阶段的人的小小的分享。这几天看了看node.j

谁借莪１个温暖的怀抱￠/ 2022年03月25日 11:16/ 0 赞/ 262 阅读

相关 Vue踩坑之旅——Vuex

问题：某个组件在周期mounted中调用了使用computed属性getter来的全局变量，该全局变量为异步请求的数据，在非路由进入页面即刷新该页面时跳过了store的inde

阳光穿透心脏的1/2处/ 2022年01月19日 01:55/ 0 赞/ 322 阅读

相关 Vue踩坑之旅（三）—— 修改子组件样式

在vue组件中为 `<style>` 标签开启 `scoped` 属性，这样样式只作用于这个组件，而不会污染其他组件。在项目中，我们经常要引入外部的 UI 组件（如 ele

爱被打了一巴掌/ 2022年01月12日 02:37/ 0 赞/ 1180 阅读