el-样式穿透

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

猜你喜欢

转载自blog.csdn.net/qq_43840793/article/details/131208553