Summary of the method of style coverage problem in element-ui

Preface

In the actual development of enterprise projects, the styles provided by components cannot fully meet the actual needs, such as: the inner and outer margins, the component background color does not match the prototype diagram, etc. At this time, we need to modify the component's built-in Class value or Id value to achieve the purpose.

So, I have summarized the following methods of style depth coverage for reference:

! important

In CSS! important Rules are used to increase the weight of the style.! importantNot related to priority, but it is directly related to the final result, using a ! importantWhen a rule is used, this statement overrides any other statement.

Example:

.myclass {
  background-color: gray !important;
}

>>>、/deep/、::v-deep

All three play the role of style depth coverage, but>>>Only function andcss,becausesass/lessIf it may not be recognized, it is necessary to use it at this time/deep/and::v-deep Selector.

Example:

<style scoped>
>>> .title{
        color: #ff0;
    }
</style>
 
<style scoped lang="scss">
/deep/ .title{
        color: #ff0;
    }
::v-deep .title{
        color: #ff0;
    }
</style>

Create a new <style></style> tag

When the above two situations cannot achieve style depth coverage, you need to create a new one<style></style>Label, style overwrite. This is because<style></style>In the tagscopedThe attribute conflicts, but if you don't use itscopedThis will result in globalization of component styles. At this time, you can create a new <style></style> tag to store the tag styles you want to cover deeply (A .vue file allows multiple styles）。

<style >
.new_dialog .el-dialog {
    background-color: #E4E7ED;
    min-width:1104px;  
}
</style>
 
<style scoped>
.el-divider--horizontal {
    margin: 8px 0;
    background: 0 0;
    border-top: 1px dashed #e8eaec;
}
</style>

Notice:

It should be noted that you need to reassign a new class value to the label you want to cover in depth, in case the style renders to the same components of other interfaces (with element-ui, the class values ​​of the components used in each interface are consistent).

Summarize

This is the end of this article about the style coverage problem in element-ui. For more related element-ui style coverage problem, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!