當我們在vue中引入第三方元件庫的時候，vue元件中樣式的scoped就會成為我們修改樣式的阻礙，有以下三種方法修改樣式，並且不影響全域性樣式：

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>
 

這樣input框的寬度就是400px了

轉：https://www.cnblogs.com/my466879168/p/12091439.html