如何修改 Element-UI input 标签的高度

从以下地址拿的https://www.jianshu.com/p/2c65d9c5a78b————————————————————————————————————————深度作用选择器如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符。有些像 Sass 之类的预处理器无法正确解析 >>>，...

sani_x

11136人浏览 · 2020-04-20 16:44:42

sani_x · 2020-04-20 16:44:42 发布

使用 ::v-deep 兼容更高！！！

从以下地址拿的

https://www.jianshu.com/p/2c65d9c5a78b

————————————————————————————————————————

深度作用选择器
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，
例如影响子组件，你可以使用 >>> 操作符。有些像 Sass 之类的预处理器无法正确解析 >>>，
这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

注意最后一句话，在 scss 环境下，就是上面高度没有生效的例子，当我们指定 lang='scss' 样式就会全部失效。效果如下：

<template>
    <div>
        <el-input></el-input>
    </div>
</template>

<script>
    export default {

    };
</script>

<style scoped lang="scss">
    div{
        margin: 50px;
    }
    >>> .el-input__inner{
        width: 190px;
        height: 500px;
    }
</style>

去掉 lang 并且高度生效案例如下：

<template>
    <div>
        <el-input></el-input>
    </div>
</template>

<script>
    export default {

    };
</script>

<style scoped>
div{
    margin: 50px;
}
>>> .el-input__inner{
    width: 190px;
    height: 500px;
 }
/*下面这个方法也可以*/
/deep/ .el-input__inner{
    width: 190px;
    height: 500px;
 }
</style>

所以在css上面定义“scoped“ 就可以覆盖原来的样式了

”