【vue】element-UI、vant热门UI组件库默认自带(双下划线样式无法修改)样式的修改方法

现在最热门的VUE框架在使用element-UI、vant等UI组件库时，会稍微修改一下自带的默认样式，但是很多时候是修改不了，尤其是那些带双下划线的样式根本修改不了。下面是我研究总结的修改样式的方法：

elementui默认样式修改的问题

1、在样式外新增一个样式不添加scoped

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

2、使用deep样式穿透

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

3、使用>>>穿透

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

4、有些样式是行内样式权重比较高则需要使用上面的几种方法来保证可以修改样式并且添加上!important来增加权重

<el-input v-model="input" placeholder="请输入内容" style="width: 300px;"></el-input>
<style scoped>
	.my >>> .el-input__inner{
		border-radius: 30px;
		border: 1px solid #eceef2;
		outline: 0;
		width: 400px!important;
	}
</style>

vant组件库的默认样式修改

在双下划线的样式名前面加上 /deep/ 

/deep/ .van-collapse-item__title{
        color: #1989FA;
        font-weight: bold;
}