(iview,elementui,treeselect) style local modification
Learning description
During the use of vue, we know that the use of plug-ins can greatly improve our development efficiency. This writing of plug-ins has been verified and modified by many people, and is much more convenient than writing ourselves.
However, during the development process, some plug-ins on specific pages may not be the original style and need to be modified. However, when we use vue, we will use scope to prevent the current page style from contaminating other pages, but this also causes us to modify the plug-in style to fail to play a role. Only global modifications can work.
So is there any other way to modify the style of the plug-in and have styles that will not pollute the global one? The answer is: Yes
Specific methods
1> /deep/ Deep penetration
scoped can effectively contaminate the style globally, but it also prevents us from modifying the third-party plug-in style. Using /deep/ style penetration can not only achieve the effect of modifying the third-party plug-in style, but also will not cause global pollution.
/deep/ .ivu-tooltip-light .ivu-tooltip-inner {
background-color: #ecc9e2;
color: #f30000;
}2> >>>
In fact, this is another way of writing /deep/, but some preprocessing such as sass and less may not be parsed correctly, so it is best to use /deep/.
>>> .ivu-tooltip-light .ivu-tooltip-inner {
background-color: #ecc9e2;
color: #f30000;
}Note: The penetration method actually violates the meaning of the scoped attribute. Moreover, excessive use of scoped in vue causes the size of the page package file to increase.
vue+iview style penetration-modify third-party plug-in styles
Modify the style of third-party plug-in
Method 1:
When you didn't use the depth selector before, when you want to modify the third-party plug-in style, it is usually done to add a .zujian-parent-class .disanfang-class to modify it in the public style sheet file.
For example, I want to modify the iview cell style:
Write this in the file
.first-table .ivu-table-cell padding-left: 10px;
Method 2:
If the method is similar, you can also write a scoped-free component in the component.
<style lang="stylus"> /*Write overlay style here*/ .first-table .ivu-table-cell padding-left: 10px; </style> <style lang="stylus" scoped> /*Please write local style here*/ </style>
Method 3:
Using a depth selector to form style penetration is a better choice, so you don't have to worry about style contamination in the same name.
In the component
<style lang="stylus" scoped>
/*Style penetration can be used /deep/ >>> ::v-deep
Which one is used varies depending on the language, version and webpack version (usually not available >>>) */
.first-table /deep/ .ivu-table-cell {
height: 37px;
line-height:37px;
}
</style>Official website link
Note: /deep/ >>> ::v-deep Notes:
The internal class of the component cannot penetrate successfully.
For example, the outermost .ivu-dropdown can be used, but its next .ivu-dropdown-rel cannot be penetrated.
It has been proved that taking ivewui as an example, all classes on the outermost layer of the component are OK, but some classes inside the component cannot take effect through the third method. In fact, this is also determined based on the loading sequence of specific components.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.