why my css code is not working in vuejs?

Question

I've got problem with css in VueJs. Sorry for poor description, but I have no idea what I'm doing wrong.

My css in style scoped works generally fine in vuejs, I can normally address idis and classes.

The problem is when I want to change for example value of internal css of an element of vuetify framework, or wysiwyg editor. I don't understand, because on codepen everything works fine. For example here I'm setting padding of wysiwig editor to 0 and it simply works (in codepen):

template:

<div class="container">
  <div id="editor-container">

  </div>
</div>

script

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose the most wonderful and amazing epic you could ever imagine!',
  theme: 'snow'  // or 'bubble'
});

style

.ql-editor {
  padding: 0!important;
}

On my vuejs SPA I'm pasting the exactly the same css code and it does nothing. I'm in the right component, adressing right element. In my console, when I'm doing inspect - I see properties of .q1-editor as padding 12px etc. So nothing is changing in my website :( I'm sorry for poor explanation - css is not my primary language.

Maybe someone who have more experience with css will have an idea what I'm doing wrong.

Answer 1

One Way

Use a deep selector in your scoped styles: .container >>> .ql-editor.

<style scoped>
  .container >>> .ql-editor {
    ...
  }
</style>

This would generated something like:

<style>
  .container[v-abc123] .ql-editor {
    ...
  }
</style>

You can read about that here: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

---

Another Way

Don't use scope on your style tag.

---

Explanation

When you use scoped on style tags in .vue files it adds an attribute specifier to each of your CSS selectors. When Vue generates the HTML for the component it adds the attribute to the HTML so the selectors will match up. Since quill is generating the DOM for this plugin, not Vue, the selectors won't match up.

The generated CSS looks something like this:

.ql-editor[v-abc123] {}

but the element with the class ql-editor does not look like this since Vue didn't generate it, so it won't match:

<div class="ql-editor" v-abc123></div>

it just looks like this:

<div class="ql-editor"></div>

What you can do is have multiple <style> tags in your Vue file. That way you can keep the scoped styles which are very useful and only add absolutely needed global styles as well.

<style scoped>
   /* Styles for things that are in the DOM visible in your template tag */
</style>

<style>
  /* quill specific selectors (global) */
</style>

I'd try to keep the selectors in the global style as unique as possible so it doesn't leak. You can add a parent around the editors and do something like:

<style>
  .unique-to-this-component .ql-editor {
    ...
  }
</style>