CODEWITHSUNDEEP
cssvue.jsvuejs2
undefined
undefined

Reputation: 4135

VueJS is removing my !important CSS declaration

I need to place inline !important css declarations in an e-mail signature, otherwise Gmail won't display it correct it.

My styles are binded via :style, and if I place !important in the declaration it removes that property.

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

Only the color gets applied, I've even tried this:

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

To try and fool it, and it does get text-decoration:none applied but without the !important flag.

I'm lost. Can anybody tell me a workaround this?

Upvotes: 0

Views: 4560

Answers (2)

Felippe Duarte
Felippe Duarte

Reputation: 15131

After some time I've found out that you have to use "text-decoration" instead to work:

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

In vue.common.js it reaches this line:

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

Where name = textDecoration. In this case, the string textDecoration doesn't work, should be text-decoration.

Upvotes: 2

Roy J
Roy J

Reputation: 43881

If you don't include textDecoration in linkStyle, your last example works:

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>

Upvotes: 1

Related Questions