Element-ui 样式重写

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，找到_element-ui@1.4.13@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这样会出错。