19

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.

gileneusz
  • 1,435
  • 8
  • 30
  • 51

3 Answers3

37

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>
Bill Criswell
  • 32,161
  • 7
  • 75
  • 66
  • but now theoretically - what if I've got multiple quill editors on the same page or in other components and I want to change margin in only some of them? If I will not use scoped - then I will change it globally. – gileneusz Feb 26 '18 at 20:12
  • 1
    You can do like `.parent-specific-class .ql-editor {}` in the global style. – Bill Criswell Feb 26 '18 at 20:15
  • 1
    Do like `
    ` then `.foo .ql-editor` in the global (or maybe `.foo.ql-editor`, not sure what quill does with the element) but this should get you close.     – Bill Criswell Feb 26 '18 at 20:17
  • I just added another approach, that's likely preferred, that I completely forgot about while answering the question initially. – Bill Criswell May 09 '18 at 13:33
2

What happened to me was that I did not include the end </style> tag, a thing like that can break it, so make sure you double check your vue file.

Armin
  • 2,021
  • 2
  • 19
  • 17
1

Make sure you're not forgetting to include the .css file built by webpack or similar!

Nicholas Betsworth
  • 1,707
  • 19
  • 24