elementui默认样式修改的几种方法

2021年09月16日 阅读数:2
这篇文章主要向大家介绍elementui默认样式修改的几种方法,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

elementui默认样式修改的问题

当咱们在vue中引入第三方组件库的时候,vue组件中样式的scoped就会成为咱们修改样式的阻碍,有如下三种方法修改样式,而且不影响全局样式: 1 在样式外新增一个样式不添加scopedhtml

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

2 使用deep样式穿透vue

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

3 使用>>>穿透ui

<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来增长权重spa

<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了code