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

爱被打了一巴掌 2022-01-12 02:37 1133阅读 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 条评论，1133人围观）

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

相关阅读

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

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

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

相关 vue中动态修改组件样式

今天遇到了个难题，在次记录一下。一般我们vue中动态修改一个组件的样式会用 :class :style等方法。今天我在修改一个组件样式的时候发现覆盖不了原有样式

客官°小女子只卖身不卖艺/ 2023年02月23日 12:28/ 0 赞/ 47 阅读

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

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

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

相关 ReactNative 踩坑之旅

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

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

相关 Webpack 踩坑之旅

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

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

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

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

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

相关记一次修改php.ini不生效的踩坑之旅

前言想给公司的测试环境装一个xdebug，按照以往的方式（之前已经装过很多次了），编译安装了xdebug，然后修改php.ini，将xdebug扩展加进去，可是，不论怎么改

- 日理万妓/ 2022年05月15日 14:53/ 0 赞/ 473 阅读

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

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

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

相关 Vue踩坑之旅——Vuex

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

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

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

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

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