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

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

• 原因是因为我们在使用vue编写css样式时,会在style添加scoped属性

• 添加了scoped的组件无法修改的样式，去掉scoped就可以了。

• vue中的scoped属性的效果主要通过PostCSS转译实现，

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

解决方法

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

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

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

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>

缺点：有时候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>