修改scoped下的element的样式不生效的问题

最近项目结束了,在优化的时候主要是调整一些样式的问题,项目中使用的是element的组件在使用tooltip/dialog组件的时候,修改样式发现没有生效,在结合广大网友的智慧之后,发现了三种实现方式但是各有优缺点,在这里记录一下,便于日后的使用.

动态添加组件的层级并不是在使用的地方,而是和我们的app是在同一层级的,所以直接scoped中改是不会生效的

第一种

自定义一个公共的css配置文件,提前设置固定的css样式在使用@import引入使用
优点:这样的好处就是全局的样式不受当前组卷scoped的影响
缺点:如果在项目中多处使用,想要设置不同的样式的时候要添加不同的css类

第二种

这种方式比较常见,可以在文件中添加两个style,一个添加scoped,一个不写,不写scoped的样式会作用到全局

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

这样虽然可以解决问题但是会有坑,就是样式会影响到全局,干扰其他地方的样式,还不好排查,在初次解决这类样式问题的时候我也是这样解决的,但是就掉坑了,这个方式还是不是特别的好,慎用!!!
如果想要避免这个问题其实是可以在不写scoped的style中在使用一个组件最外层的类包裹一下,也是可以的(自己没有实践,有需要和感兴趣的可以试一下)

第三种

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;
    }

注意:以上的方式均是在已经使用了/deep/和importent 不生效的情况下才想出的解决办法,