Antd技术问题：禁用状态的Input在Form.Item报错时如何修改边框颜色？

数据老陈

2026-8-18

解决禁用Input在Form校验报错时修改边框颜色的问题

核心原因

禁用状态的Input组件自带高优先级CSS样式，会覆盖Form.Item校验报错时默认的错误边框样式，得用更精准的CSS选择器强制覆盖原有规则。

实现方案（以Ant Design为例）

1. 全局样式覆盖

在全局CSS文件中添加以下规则，直接针对报错状态下的禁用Input：

/* AntD v4 版本 */
.ant-form-item-has-error .ant-input[disabled] {
  border-color: #ff4d4f; /* 可替换为自定义错误色 */
  background-color: #f5f5f5; /* 保留禁用状态背景色，可选 */
}

/* AntD v5 版本（类名有调整） */
.ant-form-item-with-error .ant-input-disabled {
  border-color: #ff4d4f;
}

2. 组件内局部样式（推荐，避免全局污染）

用CSS Modules时，在组件样式文件中通过:global()命中全局类名：

/* 组件内的.module.css文件 */
.formItem :global(.ant-form-item-has-error .ant-input[disabled]) {
  border-color: #ff4d4f;
}

然后给Form.Item绑定类名：

import styles from './YourComponent.module.css';

<Form.Item
  name="targetField"
  rules={[{ required: true, message: '请填写此字段' }]}
  className={styles.formItem}
>
  <Input disabled />
</Form.Item>

3. 内联样式结合表单校验状态

不想写CSS的话，可通过Form的API手动判断校验状态来设置样式：

const [form] = Form.useForm();
const { getFieldError } = form;

<Form.Item
  name="targetField"
  rules={[{ required: true, message: '请填写此字段' }]}
>
  <Input
    disabled
    style={{
      borderColor: getFieldError('targetField') ? '#ff4d4f' : undefined
    }}
  />
</Form.Item>