web前端

Vue修改子组件样式

在Vue组件中,当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。效果如下

<template>
    <input></input>
</template>

<style lang="scss" scoped>
    input {
        height: 26px;
    }
</style>

编译之后:


<template> <input data-v-3fd1390c></input> </template> <style> input[data-v-3fd1390c] { height: 26px; } </style>

但是,在使用子组件/UI框架的时候,要修改样式是不会生效的,效果如下(以iview为例):

<template>
    <Input></Input>
</template>

<style lang="scss" scoped>
    .ivu-input-wrapper {
        .ivu-input {
            height: 26px;
        }
    }
</style>

编译之后:

<template>
    <div data-v-3fd1390c class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text">
        <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
        <input autocomplete="off" spellcheck="false" type="text" placeholder="" class="ivu-input ivu-input-default">
    </div>
</template>

<style>
.ivu-input-wrapper  .ivu-input[data-v-3fd1390c] {
    height: 26px;
}
</style>

可以看到,由于作用域问题,只有子组件的根组件被影响,有了data-v-3fd1390c属性,而css编译出来之后是样式的最后一个选择器拥有作用域属性.ivu-input[data-v-3fd1390c],所以样式不会生效,当然尤大肯定也想到了,所以vue-loader提供了深度作用选择器

深度作用选择器

根据官方解释,现在需要把css修改为如下方式:

.ivu-input-wrapper {
    ::v-deep .ivu-input{
        height: 26px;
    }
}

编译之后:

.ivu-input-wrapper[data-v-3fd1390c]  .ivu-input {
    height: 26px;
}

如此这般,完美解决。

一条评论

发表评论

电子邮件地址不会被公开。