https://blog.csdn.net/weixin_42024288/article/details/81042575
写了一个vue方面比较全的博客，也包括该博客内容，并进行修正，链接：
https://blog.csdn.net/weixin_42024288/article/details/82181762
首先，vue与Element-ui兼容性很好，但是Element-ui用起来样式有限，所以我们必须对其内部的css进行一定的覆盖去更改它。
我用el-input 输入框中的多行文本框的时候
<el-input
v-model="input"
rows="15"
:type="textarea"
></el-input>
发现字体始终为宋体且字号很小。于是我加了
<el-input
v-model="input"
rows="15"
:type="textarea"
style="font-size:20px;font-family:'Microsoft YaHei'"
></el-input>
依然没有任何变化。
后来想到去覆盖input默认css样式。我打开了node_modules，找到[email protected]@element-ui，点进去打开lib文件夹下theme-default中的input.css，这是el-input默认样式，ctrl+F搜索font-size，找到了el-textarea__inner
这个里面有默认的font-size:14px;但是不能在这上面进行修改。所以回到你的项目网页。添加如下内容：
<style>
.el-textarea__inner{
font-family:"Microsoft";
font-size:20px;
}
</style>
进行覆盖即可，上面控件也不用额外加class修饰。对于单行文本框也可以这样进行修改,加入el-input__inner{}即可。
最后，如果进行上述修改，会发现其他页面的样式也同时会被修改，这个时候需要用scoped和>>>符号进行穿透。
css里面写
<style scoped>
.textarea >>> .el-textarea__inner{
font-family:"Microsoft" !important;
font-size:20px !important;
}
</style><!--!important指明优先级，最好加上。-->
template里面对应去写
<el-input
class="textarea"
/* 其他属性 */
>
</el-input>
或者
<div class="textarea">
<el-input
/* 其他属性 */
>
</el-input>
</div>
即可只改变该页面样式。要注意的一点是 新样式 和 原样式 名字不能相同，如不能.el-textarea__inner >>> .el-textarea__inner这样会出错。