修改Element默认样式

最新推荐文章于 2024-10-25 10:29:56 发布

原创最新推荐文章于 2024-10-25 10:29:56 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

前端面试同时被 3 个专栏收录

14 篇文章

订阅专栏

前端工具

3 篇文章

订阅专栏

前端Vue

2 篇文章

订阅专栏

在使用Vue并引入Element时，如何绕过scoped限制，调整组件库样式：1. 添加无scoped样式；2. 使用Deep穿透（Less, Sass）；3. 使用>>>穿透（stylus）；4. 对于行内样式，加!important提高权重。" 9380491,1183164,Quartz框架的Cron表达式详解,"['定时任务', '框架', 'Java开发', '调度']

修改Element默认样式

当我们在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样式穿透（Less、Sass的处理方法）

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

3、使用 >>> 穿透（stylus的穿透方式）

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