VueJS is removing my !important CSS declaration

Question

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?

Apply a class and put the !important in the css associated with the class. github.com/vuejs/vue/issues/3761#issuecomment-249422167 — Roy J
– Roy J, Commented Jan 17, 2018 at 15:59
Will this style be inlined? Remember, e-mail signatures only deal with inline styling. I cannot have a <style> element. — undefined
– undefined, Commented Jan 17, 2018 at 16:39
Is this an option for you? <a style="text-decoration:none !important"></a> — Felippe Duarte
– Felippe Duarte, Commented Jan 17, 2018 at 17:23
Yes it was, I was a little sleep deprived and couldn't see my obvious syntax error. — undefined
– undefined, Commented Jan 17, 2018 at 22:49

Felippe Duarte · Accepted Answer · 2018-01-17 17:50:07Z

2

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.

edited Jan 17, 2018 at 17:50

answered Jan 17, 2018 at 17:44

Felippe Duarte

15.2k2 gold badges27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

undefined Over a year ago

Your answer is great because it takes a peek at how Vue actually parses it, and of course, the source code would reveal the mistery! That's why I'll give the checkmark to you instead of Roy, even though his answer is stellar too.

Roy J · Accepted Answer · 2018-01-17 17:24:22Z

1

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>

answered Jan 17, 2018 at 17:24

Roy J

44k10 gold badges84 silver badges106 bronze badges

1 Comment

undefined Over a year ago

I think I might need some sleep, I've just now seen that I put text-decoration !important instead of text-decoration: none !important. I believe both your answer and Felippe's are great for different reasons.

Collectives™ on Stack Overflow

VueJS is removing my !important CSS declaration

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related