项目中如何修改element-ui的默认样式(去除scoped,样式穿透 ＞＞＞ , less/sass : /deep/)

我们在vue中引入第三方组件库时,组件中style样式中的scoped会成为我们修改样式的阻碍,要想修改css样式,并且不影响全局样式,有三种解决方法：

方法一:
在修改css样式style标签里,把它的scoped属性去掉,然后在这个标签的内容里面写需要修改的element-ui默认css样式(element-ui中标签设置样式都是前面加.的):

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

方法二:
用 >>> 箭头穿透:

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

方法三:
用/deep/穿透:

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