项目中如何修改element-ui的默认样式_el-input修改默认样式-CSDN博客

本文链接：https://blog.csdn.net/ikun__/article/details/117789719

在使用Vue和element-ui时，由于 scoped 属性的存在，修改组件库的默认样式成为挑战。本文介绍了多种解决方案，包括移除 scoped、使用 PostCSS、CSS 深度选择器（::v-deep）、>>> 选择器、添加 !important 以及通过组件内部的 :class 来定制样式。每种方法都有其优缺点，开发者可根据实际需求选择合适的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中如何修改element-ui的默认样式？

原因是因为我们在使用vue编写css样式时,会在style添加scoped属性
添加了scoped的组件无法修改的样式，去掉scoped就可以了。
vue中的scoped属性的效果主要通过PostCSS转译实现，

注明： PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具

那么有没有办法在不改变原来写好的css样式的情况，修改默认的element-ui样式呢？

解决方法

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

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

缺点：这样设置的是全局样式，意思就是如果你的项目里面有多个css需要修改，那么这么设置，两个地方都会被改变。

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

缺点：有时候sass会不识别，从而不起效果。

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>

5 通过style修改，用于局部组件块

<el-button :style="selfstyle">默认按钮</el-button>
<script>
	export default {
		data() {
			return {
				selfstyle: {
					color: "white",
					marginTop: "10px",
					width: "100px",
					backgroundColor: "cadetblue"
				}
			};
		}
	}
</script>

6 :class引用修改样式

<el-button :class="[selfbutton]">默认按钮</el-button>
<script>
	export default {
		data() {
			return {
				selfbutton: "self-button"
			};
		}
	}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
	.self-button {
		color: white;
		margin-top: 10px;
		width: 100px;
		background-Color: cadetblue;
	}
</style>