1

I use Vue-Editor.

<vue-editor id="editor" ref="editor" v-model="content" :use-custom-image-handler="true" @image-added ="added" @image-removed ="deleted" :key="componentKey"/>

On mobile devices, the icons are to small. I like to increase the icons size on mobile devices, but on medium devices, I like to keep the default size.

If I do it in this way, the size changes for all pages not only for the current page:

<style>
.p {
    color: black
}

.ql-snow.ql-toolbar button {
    height: 35px !important;
    width: 35px !important;
}

.quillWrapper .ql-snow.ql-toolbar button svg {
    width: 35px !important;
    height: 35px !important;
}
</style>

If I do it with <style scoped> it doesn't pass the css to the plugin component.

How I can change the css for the plugin only in one Vue component without having a global effect?

kissu
  • 40,416
  • 14
  • 65
  • 133
Peter
  • 655
  • 1
  • 14
  • 37

1 Answers1

0

You can keep scoped but then, you need to make a deep selector like >>> .ql-snow.ql-toolbar button to select the 3rd party library.

If using SASS, use ::v-deep, more details here.

kissu
  • 40,416
  • 14
  • 65
  • 133