Cannot select most classes with Single File Component style

[neoshamangames]

vue@2.5.17 vue-quill-editor@3.0.6

Here is my .vue:

<template>
    <quill-editor class='quillEditor' vmodel='script.scriptBody' />
</template>

<script >
import 'quill/dist/quill.snow.css';
import { quillEditor } from 'vue-quill-editor';

export default {
    components: {
        quillEditor
    }
}
</script>

<style scoped>
.quill-editor {
    background-color: cyan;
}

.ql-container {
    background-color: purple;
}

.ql-toolbar {
    background-color: red;
}
</style>

The expected result is that the toolbar be red and the container be purple. Instead I am seeing both as cyan. When I look in Chrome's Developer Console, I can see that my css is being applied to .quill-editor but not to .ql-container or .ql-toolbar.

Thanks for any and all help.

[maciz84]

I also have this problem?

[TAnas0]

I have a somewhat related issue.

I noticed that to write in the editor, the user must click in ql-editor element, which wraps the content and is very small in the beginning. I tried expanding it by applying styles to it but it seems like you can't access the rendered elements.

[sunchenguang]

of course you can. example:

 .quill-editor-normal {
    .ql-container,
    .ql-editor {
      max-height: 250px;
    }
    .ql-toolbar {
      line-height: 1.5;
    }
  }

  .quill-editor-disabled {
    img {
      pointer-events: none;
    }

    .ql-toolbar {
      display: none;
    }

    .ql-container {
      border-top: 1px solid #ccc !important;
    }
  }

we expected the [data-vXXXX] attribute only applied to the first class.

but if scoped style apply to last class name(no effect), you should use deep selector, you can see vue-loader doc. this feature is valid after vue-loader V11.2.0

https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements