The problem that modifying the style of the element under scoped does not take effect

Recently, the project ended, and the optimization was mainly to adjust some styles. The element component was used in the project. When using the tooltip/dialog component, the modified style did not take effect. After combining the wisdom of the majority of netizens, I found out The three implementation methods have their own advantages and disadvantages, and they are recorded here for future use.

The level of dynamically added components is not where it is used, but it is at the same level as our app, so direct scoped changes will not take effect

The first

Customize a public css configuration file, set a fixed css style in advance and use @import to introduce it. Advantages
: The advantage of this is that the global style is not affected by the scoped of the current volume.
Disadvantages: If it is used in multiple places in the project, if you want When setting different styles, add different css classes

the second

This method is more common, you can add two styles to the file, one adds scoped, one does not write, the style that does not write scoped will affect the whole world

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

Although this can solve the problem, there will be pitfalls. That is, the style will affect the overall situation and interfere with the styles in other places. The way is still not particularly good, use it with caution!!!
If you want to avoid this problem, you can actually use the outermost class of a component to wrap it in a style that does not write scoped. It is also possible (I have not practiced it myself, if necessary And those who are interested can try it)

third

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>

//如果修改小箭头的样式
.el-tooltip__popper[x-placement^=top] .popper__arrow:after{
        border-top-color:  #595959 !important;
    }

Note: The above methods are solutions only when /deep/ has been used and the import does not take effect.