vue中element-ui组件默认css样式修改的方式是什么

这篇文章主要介绍“vue中element-ui组件默认css样式修改的方式是什么”，在日常操作中，相信很多人在vue中element-ui组件默认css样式修改的方式是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue中element-ui组件默认css样式修改的方式是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联网站建设提供从项目策划、软件开发，软件安全维护、网站优化(SEO)、网站分析、效果评估等整套的建站服务，主营业务为网站建设、网站设计，app软件开发公司以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。创新互联深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

1.使用全局统一覆盖

针对一些通用的、样式固定的组件，可以全局处理，其方法是新建一个css或者scss文件，覆盖element原有的class

你可以在src/styles目录下新建一个element-ui-reset.scss，根据UI的需要，修改原有的class名称

使用scss的好处是可以使用变量，来应对UI的不同变化

比如我们常用的按钮、分页、复选框等组件，在UI中基本都是同样的设计，那么我就就可以统一修改这些样式

element-ui-reset.scss

$danger-btn-color: #F25454;
$primary-btn-color:#3d66e4;
$success-btn-color:#12A763;


//修改默认按钮颜色
.el-button--primary{
	background-color: $primary-btn-color;
	border-radius: 4px;
	//border: 1px solid $primary-btn-color;
	font-size: 16px;
	border: 0;
	
}

//修改危险按钮的颜色
.el-button--danger{
	background-color: $danger-btn-color;
	border-radius: 4px;
	//border: 1px solid $danger-btn-color;
	font-size: 16px;
	border: 0;
}

//修改成功按钮的颜色
.el-button--success{
	background-color: $success-btn-color;
	border-radius: 4px;
	//border: 1px solid $success-btn-color;
	font-size: 16px;
	border: 0;
	
}

//修改默认按钮的颜色
.el-button--default{
	font-size: 16px;
	border-radius: 4px;
}


//修改成功按钮的颜色
.el-button--warning{
	//background-color: $success-btn-color;
	border-radius: 4px;
	//border: 1px solid $success-btn-color;
	font-size: 16px;
	border: 0;
	
}


//修改分页颜色
.el-pagination{
	position: absolute;
	display: inline-block;
	margin: 0 auto;
	left:50%;
	transform: translateX(-50%);
	background-color: #fafafa;
	border: solid 1px #dfe8eb;
	padding: 0 !important;
	.el-pager{
		margin: 0 !important;
		.number{
			color: #3d66e4 !important;
			border-left: 1px solid #dfe8eb;
			border-right: 1px solid #dfe8eb;
			background-color: #fafafa !important;
			&.active{
				color: #fff !important;
				//border: 1px  solid  #3d66e4;
				background-color: #3d66e4 !important;
				border: 1px solid #3d66e4 !important;
			}
		}
		
	}
	
}	

.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
	margin: 0 !important;
	background-color: #fafafa !important;
}


//修改checkbox
.el-checkbox__inner{
	  border: 1px solid #C0C0C0 ;
	  width: 16px;
	  height: 16px;
	  border-radius: 0;
}

然后在你的main.js中引入

import './src/styles/element-ui-reset.scss'

这样

优点

• 全局覆盖，省事

• 使用scss更加灵活

• 可以随时删除样式的覆盖

缺点

• 局部修改时需要重新覆盖

• 所有被修改的组件样式都是一样的

2.在.vue文件中修改

这种方法是在vue文件中新加一个style标签

用于修改一些特定的组件样式，但不会全局应用

比如，某个.vue文件中需要一个特别定制的table组件，而其它文件则需要用原来的样式

这样，我们最好的处理方式就是在.vue文件中新加一个style标签

在这里修改table的默认样式

但请注意，一定要加上唯一的作用域 即最外层的class名，比如我上面的my-class 。 它限定了当前table的修改样式只能在该class以及其子元素中生效

否则，table的样式仍会全局覆盖

当然，如果你愿意，可以将class换成id，这样保证了class名不会冲突

这种方式的好处在于你可以动态的绑定某些class

优点

• 灵活自定义,可以动态绑定

• 不会全局修改

缺点

• 需要指定唯一的class作用域

3.修改组件的style样式

这种方法我不是很推荐，抛开冗余不说，其实不敢保证其生效(依赖element-ui源码的支持程度)。

但是，对于某些使用频率很低但需要动态绑定属性的组件，你可以使用它

比如这个组件，我可能需要给它绑定一些动态的样式属性

这样你就可给它绑定style