Question

我得到了这个Vue组件（https://www.vue2editor.com）：

<vue-editor id="description" name="description"
:class="{'uk-form-danger': errors.has('description') }"
v-model="description"
:editorToolbar="customToolbar" v-validate="'required'">
</vue-editor>

呈现以下HTML标记：

<div class="quillWrapper" name="description" aria-required="true" aria-invalid="false">
    <div class="ql-toolbar ql-snow"><span class="ql-formats"></span></div>
    <div id="description" class="ql-container ql-snow">
        <div class="ql-editor ql-blank" data-gramm="false" contenteditable="true"><p><br></p></div>
        <div class="ql-clipboard" contenteditable="true" tabindex="-1"></div>
        <div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank" href="about:blank"></a>
            <input
                type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">
            <a
                class="ql-action"></a><a class="ql-remove"></a></div>
    </div>
</div>

现在，我想将类uk-form-danger（比较https://getuikit.com/docs/form#states-modifiers）添加到父div。

如您所见，我是通过在错误时绑定类来实现的。

好吧。问题是：uk-form-danger类不会在文本编辑器中添加红色边框颜色。

这些是.ql-toolbar.ql-snow的CSS：

.ql-toolbar.ql-snow {
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
padding: 8px;

这是uk-form-danger的CSS：

 *
 * Error
 */
.uk-form-danger,
.uk-form-danger:focus {
  color: #f0506e;
  border-color: #f0506e;
}

我可以通过在项目中添加自定义的scss来编辑css，但是我应该在其中添加什么？

感谢您的支持：-）

Answer 1

这里的问题与 CSS特异性有关-.ql-toolbar.ql-snow是一个比.uk-form-danger类更“强大”的选择器。

自定义SCSS的最快解决方法是将!important;属性添加到错误样式，因此您的自定义代码可能如下所示：

.uk-form-danger {
  border-color: #f0506e !important;
}

在另一个div div中更改div的边框颜色

1 个答案: