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

最新推荐文章于 2023-10-06 22:03:48 发布

置顶过往深处少年蓝

最新推荐文章于 2023-10-06 22:03:48 发布

阅读量1.5k

点赞数 2

分类专栏： vue 文章标签：默认样式 deep

本文链接：https://blog.csdn.net/qq_39009348/article/details/116986011

版权

vue 专栏收录该内容

58 篇文章 3 订阅

订阅专栏

在项目中修改其他组件内的样式时，scoped会成为阻碍导致样式修改不成功，有以下几种方式可成功修改样式

方式一：添加一个不加scoped的样式（注意：不写scoped就不要使用deep或者>>>穿透）

<style scoped>
.lgbtn >>> .el-button{
  background-color:rgba(0, 0, 0, 0.2);
  color:#fff;
}
</style>
<style lang="scss">
.lgbtn .el-button{
  background-color:rgba(0, 0, 0, 0.2);
  color:#fff;
}
</style>

方式二：使用deep穿透

<style scoped>
/deep/ .el-input__inner{
  border-style: none;
  background-color:rgba(0, 0, 0, 0.2);
  color: #fff;
}
/deep/ .el-button--text{
  color:#fff;
}
</style>

方式三：使用>>穿透

<style scoped>
.lgbtn >>> .el-button{
  background-color:rgba(0, 0, 0, 0.2);
  color:#fff;
}
</style>

方式四：

有些行内样式权重比较高，则需要使用important来增加权重

<style scoped>
	.lg >>> .el-input__inner{
		border-radius: 30px;
		border: 1px solid #eceef2;
		outline: 0;
        // 可覆盖行内样式的权重
		width: 400px!important;
	}
</style>