Svelte 应用程序错误：global.css 覆盖组件级 CSS

Question

在 Svelte 应用程序中，我有一个带有简单验证的表单。

表格

<form id="surveyForm" class="mt-4">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
    <button class="btn btn-full" on:click={Continue}>Continue</button>
</form>

验证：

import {fly, fade} from 'svelte/transition';
let hasError = false;
let errMessage = "";
let isSuccessVisible = false;

function validateInput() {
    var surveyForm = document.getElementById('surveyForm'),
        inputFields = surveyForm.querySelectorAll('input[type=text]');

    hasError = false;

    inputFields.forEach(function(field) {
        field.classList.remove("is-invalid");
        var inputFieldVal = field.value;
        if (inputFieldVal.length == 0) {
            field.classList.add("is-invalid");
            hasError = true;
        }
    });
    errMessage = "All the fileds are mandatory";
}


function Continue(e) {
    e.preventDefault();
    validateInput();
    if (hasError == false) {
        isSuccessVisible = true;

        setTimeout(function() {
            isSuccessVisible = false;
        }, 3000);
    }
}

为了给无效的表单字段一个红色边框，我使用border: 1px solid #c00 !important：

.error-alert {
    border: 1px solid #c00 !important;
    color: #c00;
}

The class is-invalid is correctly added (and removed), yet, the default global.css styles overwrite my component-level styles, as you can see in this REPL.

Why does this happen? What is a reliable fix?

---

NOTE: The case described is a simplified one, in reality I might need other validations, like making sure the value is numeric. The solution I have to implement is not a very specific one.

Answer 1

在 REPL 中，您会看到以下警告：

未使用的 CSS 选择器 (87:1)

那是因为.is-invalid在标记中的任何地方都没有使用选择器——如果一个类名没有被使用，Svelte 会告诉你它并删除它。为了让 Svelte 能够“看到”它，它必须在标记中——你不能用classList. （这是一项功能，而不是错误：以编程方式操作 DOM 将不可避免地导致您的视图与您的状态不同步。）

但是，在这种情况下，您不需要向输入元素添加类，也不需要在函数内部进行检查。您可以只使用输入的required属性和:invalidCSS 选择器：

<input type="text" class="form-control" placeholder="First name" required>

input:invalid {
  border: 1px solid #c00;
}

该:invalid用户提交的任何数据之前，因此，您可能要加个班，指示用户是否已经尝试已经提交国家将被应用：

<form id="surveyForm" class="mt-4" class:submitted>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="First name" required>
  </div>

  <!-- ... -->
</form>

.submitted input:invalid {
  border: 1px solid #c00;
}

添加该类的最简单方法是在click按钮上的事件处理程序中。

这是一个演示。

使用您在 HTML 中免费获得的内容还有其他好处。例如，只要存在验证错误，表单就不会提交（验证不限于“必需”——您可以指定特定模式，或使用例如type="email"要求有效的电子邮件地址等），这意味着在您的submit事件处理程序中，您已经知道输入是有效的。