css - 为什么我的 css 代码在 vuejs 中不起作用？

Question

我在 VueJs 中遇到了 css 问题。抱歉描述不当，但我不知道我做错了什么。

我在 style scoped 中的 css 在 vuejs 中通常可以正常工作，我通常可以处理 idis 和类。

问题是当我想更改例如 vuetify 框架或所见即所得编辑器元素的内部 css 值时。我不明白，因为在 codepen 上一切正常。例如，我将 wysiwig 编辑器的填充设置为 0，它可以正常工作(在 codepen 中):

模板:

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

  </div>
</div>

脚本

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'
});

风格

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

在我的 vuejs SPA 上，我粘贴了完全相同的 css 代码，但它什么也没做。我在正确的组件中，处理正确的元素。在我的控制台中，当我进行检查时 - 我看到 .q1-editor 的属性为 padding 12px 等。所以我的网站没有任何变化:( 很抱歉解释不当——css 不是我的主要语言。

也许对 css 有更多经验的人会知道我做错了什么。

Answer 1

单向

使用 deep scoped 中的选择器款式:.container >>> .ql-editor .

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

这会生成如下内容:

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

您可以在这里阅读:https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

---

另一种方式

不要使用 scope在你的 style标签。

---

解释

当您使用 scoped 时在 .vue 文件中的样式标签上，它会为每个 CSS 选择器添加一个属性说明符。当 Vue 为组件生成 HTML 时，它会将属性添加到 HTML，以便选择器匹配。自 quill正在为此插件而不是 Vue 生成 DOM，选择器将不匹配。

生成的 CSS 看起来像这样:

.ql-editor[v-abc123] {}

但是类为ql-editor的元素不是看起来像这样吗，因为 Vue 没有生成它，所以它不会匹配:

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

它看起来像这样:

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

你可以做的是有多个 <style> Vue 文件中的标签。这样您就可以保留非常有用的作用域样式，并且只添加绝对需要的全局样式。

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

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

我会尽量使选择器在全局样式中保持唯一，以免泄漏。您可以在编辑器周围添加父项并执行类似操作:

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