VueJS正在删除我 !importantCSS声明

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (137)

我需要在电子邮件签名中放置内联!importantt的CSS声明,否则Gmail将无法正确显示它。

我的样式通过以下方式绑定:样式,如果我放置!在声明中重要,它会删除该属性。

...
linkStyle: {
     "textDecoration": "none !important", //this gets autoremoved
     "color": "#334593"
}
...
<a :style="linkStyle"></a>
...

只有颜色被应用,我甚至试过这个:

...
<a :style="linkStyle" style="text-decoration !important"></a>
...

试图欺骗它,它确实text-decoration:none应用但没有!important flag

我迷路了。任何人都可以告诉我一个解决方法吗?

提问于
用户回答回答于

过了一段时间后,我发现你必须使用“text-decoration”代替工作:

linkStyle: {
    'text-decoration': 'none !important',
    color: "#334593"
}

vue.common.js中它到达这一行:

el.style.setProperty(name, val.replace(importantRE, ''), 'important');

哪里name = textDecoration。在这种情况下,字符串textDecoration不起作用,应该是text-decoration

用户回答回答于

如果不包括textDecorationlinkStyle,你的最后一个例子的工作原理:

const v = new Vue({
  el: '#app',
  data: {
    linkStyle: {
      color: "#334593"
    }
  },
  mounted() {
    document.getElementById('content').textContent = this.$el.innerHTML;
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <a href="#" style="text-decoration: none !important" :style="linkStyle">Whatever</a>
</div>
<code id="content">
</code>

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励