共计 729 个字符，预计需要花费 2 分钟才能阅读完成。
针对问题 vue + element-ui/ iview 不能调整 input 高度
上面以 element-ui 举例。
如：在页面中写了一个 <el-input>
加上类名，在 <style> 标签中设置 class，高度没有扭转（但宽度设置有成果），间接在 el-input 上设置 style 属性也没有成果，甚至加上了!important 还是没有成果。
查看网页 html 元素发现
实际上 <el-input> 是创立了一个 <div>，而原生的 <input> 是这个 <div> 的子元素，
<input> 的属性是 display: inline-block; width: 100%; height: 40px; line-height: 40px;
width: 100%; 可能继承父元素的宽度，因而给 <el-input> 设置宽度无效。
而设置高度有效，会被 el-input 的默认款式 .el-input__inner 笼罩
解决办法是利用 vue 的 深度选择器 >>> 默认类名 笼罩掉默认款式。
（官网阐明文档里也用的是 >>>），如果遇到 sass/less（Sass 3 就变成了 Scss）之类的预处理器无奈辨认 >>>，能够改写为::v-deep 或者 /deep/ 这两者都是 >>> 的别名。
应用办法:
在 <style> 标签上加上 scope 属性，找到 ui 框架的原生款式类名(能够通过 html 页面中 f12 找到元素来获取)
（深度选择器是 vue 的个性，应用不依赖 sass 或 less 等 css 预编译器）
实测在 ”scss” 预编译器中 >>> 换成::v-deep 或者 /deep/ 也能够失效。
（注：必须在编译环境中，通过编译器解决后才能够，纯前端引入 vue、element-ui 是不行的）
搬运自本人的语雀
https://www.yuque.com/diracke…
