如何用选择器修改Mantine V6 TextInput错误状态下的边框颜色？

DevOps 小满

2026-6-16

解决Mantine V6 TextInput错误状态边框颜色修改问题

当然可以用选择器结合sx prop实现，不用手动判断error变量，也不需要外部CSS文件，具体写法如下：

<TextInput
  error={yourErrorCondition} // 传入你的错误判断逻辑
  sx={{
    // 可选：设置正常状态下的边框颜色（如需覆盖默认样式）
    borderColor: 'green',
    // 定位错误状态的输入框
    '&[data-invalid]': {
      borderColor: 'red',
      // 可选：修改聚焦时的轮廓颜色（如果需要）
      '&:focus-within': {
        outlineColor: 'red'
      }
    }
  }}
/>

原理说明：

Mantine的TextInput组件在error属性为true时，会自动给组件根元素添加data-invalid属性，用&[data-invalid]选择器可直接定位到错误状态下的输入框（&代表当前组件的根元素）。
这种方式无需在sx里手动写三元判断error ? 'red' : 'green'，组件会根据自身error状态自动应用样式，代码更简洁且贴合组件状态逻辑。
你提到的styles.errors确实仅作用于输入框下方的错误提示文本，因此要修改输入框本身的错误状态样式，必须通过定位组件根元素的data-invalid属性实现。