现在前端开发在写样式的时候比以前省心多了，这无疑得益于 UI 框架的普及，但是缺点就是使用它的东西不能完全自定义。这次就遇到 element-UI input 输入框高度自定义的问题。

先测试下简单的按钮修改：

一、先放一个按钮

<template>
    <div>
        <el-button type="warning">按我</el-button>
    </div>
</template>

<script>
    export default {

    };
</script>

<style scoped>

</style>

上面是个普通的按钮。我们来改变它，自定义一个类名。

<template>
    <div>
        <el-button type="warning" class="btn">按我</el-button>
    </div>
</template>

<script>
    export default {

    };
</script>

<style scoped>

.btn{
    background-color: blue;
}
</style>

按钮变成蓝色的，符合预期。

接下来采用样式覆盖的方法，审查元素，拿到类名。

<template>
    <div>
        <el-button type="warning">按我</el-button>
    </div>
</template>

<script>
    export default {

    };
</script>

<style scoped>

.el-button,.el-button--default{
    background-color: gold;
    height: 50px;
 }
</style>

同样没问题。

element-UI 自定义样式可以自定义类名也可以采用覆盖的方法。下面来看看输入框：

二、输入框

放一个输入框：

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

<script>
    export default {

    };
</script>

<style scoped>

</style>

这是个没有任何限制的输入框

自定义类名修改样式：

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

<script>
    export default {

    };
</script>

<style scoped>
div{
    margin: 50px;
}
.eit{
    width: 190px;
    height: 500px;
 }
</style>

很遗憾只有高度未生效。接下来使用覆盖方法：

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

<script>
    export default {

    };
</script>

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

自定义的样式全失效了。

2019年12月21日18:31:56 补充：
这里解释下为什么审查元素得到的类名 el-input__inner，在这里使用完全失效。再次总结下 elementUI 自定义样式的方法

1. elementUI 标签的标签名就是类型，例如按钮标签：<el-button></el-button> 它的类名使用就能这样 .el-button{}
2. 自定义类名覆盖原有样式，例如：class="cur"
3. 用了elementUI标签，在控制台审查元素时出现的类名。我们想去修改他的话。这时候如果你直接 copy 类名到 style 里面直接用，我们看到是失效的。因为你这个组件里面没有。如果你非要这么用，当然可以这样写，去掉scoped 变成全局样式：

<style>
.el-input__inner{

}
</style>

这种方法存在全局污染万一其他地方也用到了这个就玩完了。所以使用深度作用选择器。

所以上面我们使用控制台的样式失效，就很容易明白了，直接使用组件不存在的类名，这个类选择器只能作用在本地，全局是不会生效的。那为什么使用自定义类名也不行，因为全局对自定义的类名进行了覆盖。

分割线

---

混用本地和全局样式里面讲：

深度作用选择器
如果你希望 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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zn1kdiaS-1635751124934)(https:upload-images.jianshu.io/upload_images/16069544-07db77be7a3ea183.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)]

去掉 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;
 }
</style>

/deep/ .el-input__inner{
    width: 190px;
    height: 500px;
 }

总结：el-input 输入框，自定义类名修改样式，只有高度没生效，覆盖方法，自定义的样式全部失效，在 scss 环境下使用深度作用选择器的时候，无作用，只能不使用 css 预处理器完成高度自定义。

转载来自简书的学贤社博主的文章