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

最新推荐文章于 2024-02-10 22:49:26 发布

humiaoran

最新推荐文章于 2024-02-10 22:49:26 发布

阅读量306

点赞数

本文链接：https://blog.csdn.net/humiaoran/article/details/117803630

版权

在Vue项目中使用Element-UI时，由于 scoped 属性的存在，可能遇到修改组件样式的问题。本文介绍了四种解决方法：1) 创建不受限样式；2) 使用/deep/穿透；3) 使用>>>穿透；4) 使用 !important 增加权重。这些方法可确保修改样式并避免全局影响。

摘要由CSDN通过智能技术生成

当我们在vue中引入第三方组件库的时候，vue组件中样式的scoped会阻碍样式的修改，有以下三种方法修改样式，且不影响全局样式：

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


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

②使用deep样式穿透

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

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