el-样式穿透

最新推荐文章于 2024-02-02 15:03:41 发布

zttbee

最新推荐文章于 2024-02-02 15:03:41 发布

阅读量190

点赞数

分类专栏：前端样式与布局文章标签： elementui 前端

本文链接：https://blog.csdn.net/qq_43840793/article/details/131208553

版权

前端样式与布局专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、el-dropdown下拉菜单样式

在这里插入图片描述

.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
		background-color: rgba($green,0.1);
		color: $green;
	}

2、el-pagination分页框框样式
在这里插入图片描述

全局样式中写

//此样式一定要在全局样式中写，因为el-select-dropdown位置问题。
.el-select-dropdown__item.selected{
	color:$greenBack; ;
}
//此样式可以在文件中，不一定在全局中
.el-pagination.is-background .el-pager li:not(.disabled).active{
	background-color: $greenBack;
}

3、el-button 按钮样式
在这里插入图片描述
按钮

 <el-button class="redButton" @click="submitForm">删除</el-button>

全局中写样式，也可以不在全局中写，但要穿透

.redButton{
		border-radius: 4px;
		height: 32px;
		padding-top: 0px;
		padding-bottom: 0px;
		background-color: #FE4747;
		border-color:#FE4747;
		color: #ffffff;
	}
	.redButton.el-button:focus,.redButton.el-button:hover {
		background-color: #FE4747;
		border-color:#FE4747;
		color: #ffffff;
		}