Element-ui el-input修改多行、单行文本框文字大小样式,以及用scoped覆盖原css样式

写了一个vue方面比较全的博客，也包括该博客内容，并进行修正，链接：

https://blog.csdn.net/weixin_42024288/article/details/82181762

首先，vue与Element-ui兼容性很好，但是Element-ui用起来样式有限，所以我们必须对其内部的css进行一定的覆盖去更改它。

我用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;但是不能在这上面进行修改。所以回到你的项目网页。添加如下内容：

进行覆盖即可，上面控件也不用额外加class修饰。对于单行文本框也可以这样进行修改,加入el-input__inner{}即可。

最后，如果进行上述修改，会发现其他页面的样式也同时会被修改，这个时候需要用scoped和>>>符号进行穿透。

css里面写

template里面对应去写

 或者

即可只改变该页面样式。要注意的一点是 新样式 和 原样式 名字不能相同，如不能.el-textarea__inner >>> .el-textarea__inner这样会出错。