Javascript 在Vue.js中有条件地以CSS样式的类为目标

关于如何有条件地向元素添加类，或者如何有条件地向元素添加样式，这里有几个问题有很好的答案，但我想做的是有条件地为类添加样式

我有一个应用程序，它有自己的主题系统，允许用户选择自定义的前景和背景颜色。然后我想将这些颜色应用于quill.js工具栏按钮。如果我事先知道颜色，我可以在我的风格中添加类似的东西

.ql-toolbar .ql-stroke {
    stroke: #f00;
}

我甚至可以选择在容器上抛出一个条件类，并在模板中具有多个子样式

.ql-container.foo {
    .ql-toolbar .ql-stroke {
        stroke: #f00;
    }
}
.ql-container.bar {
    .ql-toolbar .ql-stroke {
        stroke: #b4c;
    }
}

但是由于用户可以选择任何rgb颜色，我不能这样做

我还尝试过向组件模板写入样式标记，但在尝试编译时失败了

现在，为了让事情顺利进行，我将使用document.querySelector访问工具栏，并在用户颜色设置更改时更改每个按钮svg元素的属性。这是一个丑陋的黑客，它不能处理间歇性的样式，如活动/悬停状态

---

有人知道更好的方法吗？

您可以使用

或者，如果您不想自己设置所有这些，请使用

在vue模板中

<styled-div padd justifyContent="flex-start" ></styled-div>

---

您可以使用

或者，如果您不想自己设置所有这些，请使用

在vue模板中

<styled-div padd justifyContent="flex-start" ></styled-div>

---

我从中学到的答案是使用CSS变量，可以通过样式绑定传入

<template>
   <div class="container" v-bind:style="{'--toolbarColor': toolbarColor}">
      <!-- quill goes here -->
   </div>
</template>

<style>
    .ql-toolbar {
        background-color: var(--toolbarColor) !important;
    }
</style>

<script>
    export default {
        computed: {
            toolbarColor() {
                return '#f00';
            }
        }
    }

</script>

---

我从中学到的答案是使用CSS变量，可以通过样式绑定传入

<template>
   <div class="container" v-bind:style="{'--toolbarColor': toolbarColor}">
      <!-- quill goes here -->
   </div>
</template>

<style>
    .ql-toolbar {
        background-color: var(--toolbarColor) !important;
    }
</style>

<script>
    export default {
        computed: {
            toolbarColor() {
                return '#f00';
            }
        }
    }

</script>

---

这只是设置包含组件的样式，它不针对.ql stroke类。这只是设置包含组件的样式，它不针对.ql stroke类