vue中v-html中的元素修改css无效的方法

一般项目中会通过v-html来展示，但是修改v-html中元素的样式会无效； Vue为v-html中标签添加CSS样式

<template>
<div v-if="message.messageType === 'Text'||
               message.messageType === 'RobotChitchatMessage'"
             class="chatbox-text"
        >
          <div v-for="(row, i) in message.content.split('\n')" :key="i">
            <div v-html="row.replace(regUrl, $1 =>`<a class='jumperUrl' target='_blank'
            href='${$1.toLowerCase()}'>${$1.toLowerCase()}</a>`)"
            />
          </div>
        </div>
</template>

当我们使用v-html渲染页面，使用下面这种方式去修改样式并没有效果

<style scoped lang="less">
.chatbox-text{
 .jumperUrl {
    width: 100%;
    display: block;
    overflow: hidden;
    color: #FFFFFF !important;
  }
}
</style>

解决的方法有如下几种： 一.去掉中的scoped：这个方法不建议使用，会改变布局，导致组件之间样式冲突。 二.通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值

..chatbox-text>>> .jumperUrl{
 	width: 100%;
    display: block;
    overflow: hidden;
    color: #FFFFFF !important;
}

三.通过给各个组件的第一层标签设置唯一class或者id，使用scss，然后去掉scoped。 定义两个style标签，一个含有scoped属性，一个不含有scoped属性

<style lang="scss">
.message-wrap {
  a, a:focus, a:hover {
    color: -webkit-link !important;
  }

  .jumperUrl {
    width: 100%;
    display: block;
    overflow: hidden;
  }

  &.direction-0 {
    .jumperUrl {
      color: #FFFFFF !important;
    }
  }
}
</style>

建议使用第三种方法，第二种方法亲测没有效果