项目中如何修改element-ui的默认样式

我们在vue中引入第三方组件库的时候，vue组件中样式的scoped就会成为我们修改样式的阻碍，有三种方法修改样式，并且不影响全局样式：

第一种：在原来的css样式下面，新编写一个不带scoped属性style，里面写需要修改的element-ui默认css样式。 

<style>
	.my{
		margin: 20px;
	}
	.my .el-input__inner{
		border-radius: 15px;/* 这个样式起效果 */
	}
</style>
<style scoped>
	.my .el-input__inner{
		border-radius: 30px; /* 这个样式不起效果 */
	}
</style>

缺点：这样设置的是全局样式，就是如果你的项目里面有多个css需要修改，那么这么设置，两个地方都会被改变

第二种：使用 >>> 箭头穿透

<style scoped>
	.my .el-input__inner{
		border-radius: 30px;/* 这个不起作用 */
	}
	.my >>> .el-input__inner{
		border-radius: 30px;/* 这些起作用 */
		border: 1px solid #eceef2;
		outline: 0;
	}
</style>

缺点：这样设置的也是全局样式，就是如果你的项目里面有多个css需要修改，那么这么设置，两个地方都会被改变。

第三种：使用/deep/穿透

 

<style scoped>
	.my .el-input__inner{
		border-radius: 30px;/* 这个不起作用 */
	}
	.my /deep/ .el-input__inner{
		border-radius: 30px;/* 这个起作用 */
	}
</style>