The recent project ends, in optimization mainly adjust the problem of some style, is the element components used in the project at the time of use tooltip/dialog components, modify the style found no effect, in combination with the wisdom of the people, found three way but each have advantages and disadvantages, the record here, to facilitate in the future The use of.

The dynamically added component hierarchy is not in use, it is in the same hierarchy as our app, so the changes will not work in scoped directly

The first kind of

Advantages: The advantage is that the global style is not affected by the current scoped volume. Disadvantages: If you use it in multiple places in your project, you need to add different CSS classes when you want to set different styles

The second,

This is a common way to add two styles to a file, one with scoped and one without scoped, and the style without scoped will be applied globally

<style lang="less" scoped>
.text {
  color: red;
}
</style>
<style lang="less">
.tooltip-width {
  max-width: 100px;
}
</style>
Copy the code

Although this can solve the problem but there will be a pit, is the style will affect the global, interfere with the style of other places, it is not easy to investigate, in the first time to solve this type of style problem WHEN I am also so to solve, but fell pit, this way is not particularly good, careful use!! If you want to avoid this problem, you can wrap a component’s outermost class in a style that does not write scoped.

The third kind of

popper-class

<el-tooltip popper-class="tooltip-width" placement="top"> <span slot="content" class="tooltip-text">asdfasdfasdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> <span class="text">tooltip</span> </el-tooltip> <style lang="less" scoped> .tooltip-text { max-width: 100px; display: inline-block; } </style> // If you modify the style of the small arrow. El-tooltip__popper [X-Placement ^=top]. Popper__arrow :after{border-top-color: #595959! important; }Copy the code

Note: all of the above are solutions that have already been used with /deep/ and importent not working.