Changing the default style of An Element-UI component has been a perennial topic of discussion, and after working on an entire project for my company, I came up with four ways to change the default style of an Element-UI component.
1. Use unified global coverage
For some generic, style-based components, this can be handled globally by creating a new CSS or SCSS file that overwrites Element’s original class
You can create a new element-ui-reset. SCSS in the SRC /styles directory and change the class name to suit your UI needs
The advantage of using SCSS is that you can use variables to respond to different changes in the UI
For example, buttons, pages, check boxes, and other components that we use all have the same design in the UI, so I can change those styles uniformly
element-ui-reset.scss
$danger-btn-color: #F25454;
$primary-btn-color:#3d66e4;
$success-btn-color:#12A763; // Change 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 color of the default button.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; } // Change the page 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; } // Change the checkbox.el-checkbox__inner{
border: 1px solid #C0C0C0 ;
width: 16px;
height: 16px;
border-radius: 0;
}
Copy the codeThen import it in your main.js
import './src/styles/element-ui-reset.scss'
Copy the codesuch
advantages
- Global coverage, save trouble
- Using SCSS is more flexible
- You can remove style overrides at any time
disadvantages
- Partial changes need to be overwritten
- All modified component styles are the same
In 2..vueModify in file
This is done by adding a new style tag to the Vue file
Used to modify some specific component styles, but not globally
For example, a.vue file requires a custom table component, while other files need the original style
The best we can do is add a new style tag to the.vue file
Change 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>
Copy the codeBut be sure to add a unique scope, the outermost class name, like my my-class. It restricts the current table modification style to that class and its children
Otherwise, the table style will still be overridden globally
Of course, you can change the class to id if you like, which ensures that the class names don’t clash
<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>
Copy the codeThe advantage of this approach is that you can bind certain classes dynamically
<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>
Copy the codeadvantages
- Flexible customization, can be dynamically bound
- No global changes
disadvantages
- You need to specify a unique class scope
3. Modify the component style
This approach is not recommended by me and, despite its redundancy, is not guaranteed to work (depending on how well the element-UI source code supports it).
However, you can use it for components that are used infrequently but require dynamically bound properties
For example, with this < el-Backtop > component, I might need to bind some dynamic style properties to it
This way 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%
}
}
Copy the codeadvantages
- Agile and convenient
- Dynamic binding
disadvantages
- redundant
- High coupling
4. Refer to the API in the official Element-UI documentation
Some component websites provide apis for changing styles
You can style components according to the API
advantages
- The official
disadvantages
- Fewer supported components
doubt
Why add a new style tag?
In practice, I’ve found that some classes written with scoped attributes don’t work for element-UI components
This results in some modifications that work and some that don’t, so you simply rewrite the style tag
Why not! Important attributes
This guy is a bully, more powerful than global modification. And it’s a pain to write
Why not: V-deep penetration
First of all, it’s too coupling, aside from the gross way it’s written
If you don’t need style overwrites, you just need to remove the new style tag
Instead of using :v-deep, change line by line who can stand it
conclusion
The above method is not very official practice, but my daily development after stepping on the pit, summed up the method
It’s not perfect, but it solves a lot of my problems
If you have a good idea or think I have any mistakes or omissions, please point them out in the comments section