Reactjs 如何在输入上添加错误类，并使用SCS覆盖样式？

这是我的css：

input[type="text"] {
      .has-error {
        color: red;
        border: 1px solid red;
      }
    }

    input[type="text"],
    textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #446a63;
      outline: none;
    }

这是我的代码：

<input
  className={classNames({
    "has-error": true,
  })}
  type="text"
  placeholder="Name"
  value={values.name}
  onBlur={handleBlur("name")}
  onChange={handleChange("name")}
/>

---

在CSS中，

输入[type=“text”]

的选择器比CSS类的选择器更具体，因为

有错误。因此，标记样式将覆盖类样式（您应该能够在开发人员控制台中看到这一点）


因此，您可以使用更明确的选择器修复代码，直接引用标记和类：

input[type=“text”].有错误，textarea.有错误

input[type="text"],
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #446a63;
  outline: none;
}

input[type="text"].has-error,
textarea.has-error {
  color: red;
  border: 1px solid red;
} 

input[type="text"],
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #446a63;
  outline: none;
}

input[type="text"].has-error,
textarea.has-error {
  color: red;
  border: 1px solid red;
}