elementui默認樣式修改的幾種方法

elementui默認樣式修改的問題

當我們在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了