如何修改Element-UI的默认样式？

---

前言

element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架，element-ui组件的API方法、属性等封装的较为完善，页面简洁、大气，十分美观漂亮。

提示：以下是本篇文章正文内容，下面案例可供参考

一、方法一（style中不加scoped）

（1）style中不加scoped，直接写在全局样式里，会污染全局样式，如果需要全局使用这个样式，可以写一个通用的样式文件全局使用
（2）如果只想覆盖单个页面element的样式，就需要给他的父级元素加一个class，用命名空间来解决问题

二、深度选择器（注意：不写scoped就不要使用deep或者>>>穿透）

如果使用了sass 在scss里面用样式穿透可能不能被解析出来，所以要另写一个 style

1.使用deep穿透

<style scoped>
/deep/ .el-input__inner{
  border-style: none;
  background-color:rgba(0, 0, 0, 0.2);
  color: #fff;
}
/deep/ .el-button--text{
  color:#fff;
}
</style>

2.使用>>>穿透

<style scoped>
.lgbtn >>> .el-button{
  background-color:rgba(0, 0, 0, 0.2);
  color:#fff;
}
</style>

4.有些行内样式权重比较高，则需要使用important来增加权重

<style scoped>
	.lg >>> .el-input__inner{
		border-radius: 30px;
		border: 1px solid #eceef2;
		outline: 0;
        // 可覆盖行内样式的权重
		width: 400px!important;
	}
</style>

总结

使用deep穿透最为好用