Vue中局部修改组件样式

Vue如何修改子组件样式

在使用element-ui或者i-view这些第三方样式库时,我们有时会想只在某一个组件中局部修改库中的样式而部影响全局样式。

首先我们需要打开控制器找到对应组件的CSS样式的类名或者id

有以下几种方式

不在style样式上添加scope属性

<template>
    <div class="father">
        <el-input></el-input>
    </div>
</template>

<style>
    .father el-input{
        color:red;
    }
</style>

这样相当于只修改father类下的el-input的属性。

使用 >>> 穿透

scope的用处

scoped是Vue里面style标签的一个特殊属性,当一个style标签拥有scoped属性的时候,就相当于说明它里面的样式只作用于当前这个Vue页面,不会污染到全局的样式,从而实现了组件样式的模块化,那么它是怎么实现的呢?其实如果我们给style标签加上了scoped属性,在编译的时候,他会给我们组件里面的每一个样式加一个自定义的属性data-v-5558821a,从而通过给含有这个自定义属性的标签加上样式,从而实现了部分样式的穿透。

<template>
    <div class="father">
        <el-input></el-input>
    </div>
</template>

<style scoped>
    .father >>> el-input{
        color:red;
    }
</style>

如果使用的是less或者sass

可以将 >>> 换为 /deep/

<style scoped>
    .father /deep/ el-input{
        color:red;
    }
</style>

Powered by Hexo and Hexo-theme-hiker

Copyright © 2019 - 2024 My Wonderland All Rights Reserved.

UV : | PV :