vue中element-ui组件默认css样式修改的四种方式

目录

• 前言
• 1.使用全局统一覆盖
• 2.在.vue文件中修改
• 3.修改组件的style样式
• 4. 参考element-ui官方文档的api
• 疑问
• 总结

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

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

<template>
	<div class="my-class">
            <el-table>
            </el-table>
        </div>
</template>
<script>
</script>
<style scoped="scoped" lang="scss">
</style>
<style>
    /* 修改element-ui中table组件的样式 */
    .my-class__expand-column .cell {
            display: none;
    }
    .my-class .el-table tbody tr:hover>td {
            cursor: pointer;
    }
    .my-class .el-form .el-form-item  .el-input__inner:focus{
             border: 1px solid #3D66E4;
       }
</style>

<template>
	<div id="my-class">
            <el-table>
            </el-table>
        </div>
</template>
<style>
    /* 修改element-ui中table组件的样式 */
    #my-class__expand-column .cell {
            display: none;
    }
    #my-class .el-table tbody tr:hover>td {
            cursor: pointer;
    }
    #my-class .el-form .el-form-item  .el-input__inner:focus{
             border: 1px solid #3D66E4;
       }
</style>

 <template>
	<div id="my-class">
            <el-table :class="my-table">
            </el-table>
        </div>
</template>
<style>
    /* 修改element-ui中table组件的样式 */
    #my-class__expand-column .cell {
            display: none;
    }
    #my-class .el-table tbody tr:hover>td {
            cursor: pointer;
    }
    #my-class .el-form .el-form-item  .el-input__inner:focus{
             border: 1px solid #3D66E4;
       }
    #my-class .my-table {
    }
</style>

	<el-backtop target="" :bottom="100" >
	  <div :style="{
             height: 100%;
             width: _width;
             background-color: #f2f5f6;
             box-shadow: 0 0 6px rgba(0,0,0, .12);
             text-align: center;
             line-height: 40px;
             color: #1989fa;
             border-radius: 50%;
           }">
                        <i class="el-icon-caret-top"></i>
                </div>
        </el-backtop>
        data() {
         return{
           _width: 50%
         }
        }