這篇文章主要介紹“vue中element-ui組件默認(rèn)css樣式修改的方式是什么”，在日常操作中，相信很多人在vue中element-ui組件默認(rèn)css樣式修改的方式是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中element-ui組件默認(rèn)css樣式修改的方式是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)提供從項(xiàng)目策劃、軟件開發(fā)，軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評估等整套的建站服務(wù)，主營業(yè)務(wù)為網(wǎng)站建設(shè)、網(wǎng)站設(shè)計，app軟件開發(fā)公司以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。創(chuàng)新互聯(lián)深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

1.使用全局統(tǒng)一覆蓋

針對一些通用的、樣式固定的組件，可以全局處理，其方法是新建一個css或者scss文件，覆蓋element原有的class

你可以在src/styles目錄下新建一個element-ui-reset.scss，根據(jù)UI的需要，修改原有的class名稱

使用scss的好處是可以使用變量，來應(yīng)對UI的不同變化

比如我們常用的按鈕、分頁、復(fù)選框等組件，在UI中基本都是同樣的設(shè)計，那么我就就可以統(tǒng)一修改這些樣式

element-ui-reset.scss

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


//修改默認(rèn)按鈕顏色
.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;
	
}

//修改默認(rèn)按鈕的顏色
.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'

這樣

優(yōu)點(diǎn)

• 全局覆蓋，省事

• 使用scss更加靈活

• 可以隨時刪除樣式的覆蓋

缺點(diǎn)

• 局部修改時需要重新覆蓋

• 所有被修改的組件樣式都是一樣的

2.在.vue文件中修改

這種方法是在vue文件中新加一個style標(biāo)簽

用于修改一些特定的組件樣式，但不會全局應(yīng)用

比如，某個.vue文件中需要一個特別定制的table組件，而其它文件則需要用原來的樣式

這樣，我們最好的處理方式就是在.vue文件中新加一個style標(biāo)簽

在這里修改table的默認(rèn)樣式

但請注意，一定要加上唯一的作用域 即最外層的class名，比如我上面的my-class 。 它限定了當(dāng)前table的修改樣式只能在該class以及其子元素中生效

否則，table的樣式仍會全局覆蓋

當(dāng)然，如果你愿意，可以將class換成id，這樣保證了class名不會沖突

這種方式的好處在于你可以動態(tài)的綁定某些class

優(yōu)點(diǎn)

• 靈活自定義,可以動態(tài)綁定

• 不會全局修改

缺點(diǎn)

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

3.修改組件的style樣式

這種方法我不是很推薦，拋開冗余不說，其實(shí)不敢保證其生效(依賴element-ui源碼的支持程度)。

但是，對于某些使用頻率很低但需要動態(tài)綁定屬性的組件，你可以使用它

比如這個組件，我可能需要給它綁定一些動態(tài)的樣式屬性

這樣你就可給它綁定style