如何在Mantine的TextInput错误状态下将标签设置为红色？

当TextInput处于错误状态时，Mantine会给组件的根元素自动添加data-invalid="true"属性，我们可以利用这个属性选择器来给标签设置红色样式。

修改你的SCSS代码，添加对应的样式规则即可：

.text-input {
  display: flex;
  flex-direction: column;

  .text-input__label {
    order: -1;
  }

  // 新增：错误状态下标签变红
  &[data-invalid="true"] .text-input__label {
    color: var(--mantine-color-error); // 用Mantine主题内置错误色，也可直接写具体红色值比如#dc2626
  }

  .text-input__error {
    order: -1;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

这样当表单验证不通过时，根元素的data-invalid属性触发，标签就会自动变为错误色，和输入框边框、错误提示的颜色保持统一。

内容的提问来源于stack exchange，提问作者user3481441