Four ways to modify the default CSS style of element-ui components in Vue

Preface

Modifying the default style of element-ui components has always been a long-standing topic. After completing a whole project in the company, I summarized the following 4 methods to modify the default style of element-ui.

1. Use global unified override

For some common components with fixed styles, they can be processed globally by creating a new css or scss file to overwrite the original class of the element.

You can create a new element-ui-reset.scss in the src/styles directory and modify the original class name according to the needs of the UI.

The advantage of using scss is that you can use variables to deal with different changes in UI

For example, the buttons, paging, checkboxes and other components we commonly use have basically the same design in the UI, so I can modify these styles uniformly.

element-ui-reset.scss

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


//Modify the default button color.el-button--primary{
	background-color: $primary-btn-color;
	border-radius: 4px;
	//border: 1px solid $primary-btn-color;
	font-size: 16px;
	border: 0;
	
}

//Change the color of the danger button.el-button--danger{
	background-color: $danger-btn-color;
	border-radius: 4px;
	//border: 1px solid $danger-btn-color;
	font-size: 16px;
	border: 0;
}

//Change the color of the success button.el-button--success{
	background-color: $success-btn-color;
	border-radius: 4px;
	//border: 1px solid $success-btn-color;
	font-size: 16px;
	border: 0;
	
}

//Change the default button color.el-button--default{
	font-size: 16px;
	border-radius: 4px;
}


//Change the color of the success button.el-button--warning{
	//background-color: $success-btn-color;
	border-radius: 4px;
	//border: 1px solid $success-btn-color;
	font-size: 16px;
	border: 0;
	
}


//Modify the paging color.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;
}


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

Then import it in your main.js

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

so

advantage

• Global coverage, save trouble
• Using scss is more flexible
• Style overrides can be removed at any time

shortcoming

• Local modifications require re-covering
• All modified component styles are the same

2. Modify in .vue file

This method is to add a style tag to the vue file

Used to modify some specific component styles, but not globally applied

For example, a .vue file needs a specially customized table component, while other files need to use the original style.

In this way, our best way to deal with it is to add a style tag in the .vue file

Modify the default style of the table here

<template>
	<div class="my-class">
            <el-table>
            </el-table>
        </div>
</template>

<script>
</script>

<style scoped="scoped" lang="scss">
</style>

<style>
	
    /* Modify the style of the table component in element-ui*/

    .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>

But please note that you must add the only scope, that is, the outermost class name, such as my-class above. It limits the modified style of the current table to only take effect in this class and its child elements

Otherwise, the table style will still be globally overwritten

Of course, if you want, you can replace class with id, which ensures that the class name will not conflict.

<template>
	<div id="my-class">
            <el-table>
            </el-table>
        </div>
</template>

<style>
	
    /* Modify the style of the table component in element-ui*/

    #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>

The advantage of this approach is that you can dynamically bind certain classes

 <template>
	<div id="my-class">
            <el-table :class="my-table">
            </el-table>
        </div>
</template>

<style>
	
    /* Modify the style of the table component in element-ui*/

    #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>

advantage

• Flexible customization, dynamic binding
• No global changes

shortcoming

• You need to specify a unique class scope

3. Modify the style of the component

I don't really recommend this method. Aside from being redundant, I can't guarantee that it will work (it depends on the support of the element-ui source code).

However, for some components that are rarely used but need to dynamically bind properties, you can use it

For example, for this <el-backtop> component, I may need to bind some dynamic style attributes to it

So you can bind style to it

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

advantage

• Flexible and convenient
• Dynamic Binding

shortcoming

• redundancy
• High coupling

4. Refer to the api of element-ui official documentation

Some component official websites provide APIs for modifying styles

You can specify the style of the component according to the API

advantage

• official

shortcoming

• Fewer supporting components

doubt

Why add a new style tag?

Because in actual use, I found that some classes written with scoped attributes do not take effect on element-ui components

This resulted in some modified styles being usable and some not, so I simply rewrote the style tag

Why not use the !important attribute?

This guy is too overbearing, more coercive than global modifications. Besides, it’s hard to write.

Why not use ::v-deep penetration

First of all, apart from the disgusting way of writing, its coupling is too high

If you don't need style override, you only need to delete the new style tag

If you use ::v-deep, who can bear to change it line by line?

Summarize

The above method is not an official one, but a method I have summarized after stepping on the pit in my daily development.

Although it's not perfect, it solves my problem to a large extent.

This is the end of this article about the default CSS style modification of element-ui components in vue. For more relevant content about the default CSS style modification of vue element-ui components, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!