ant-input如何自定义写校验样式

Ant Design的Input组件是支持自定义校验样式的，具体步骤如下：

1. 使用`getFieldDecorator`方法包装Input组件，该方法返回一个高阶函数，可以用于设置表单校验规则和样式。

import { Form, Input } from 'antd';

const { getFieldDecorator } = Form;
const CustomizedInput = () => (
  <Form>
    <Form.Item>
      {getFieldDecorator('username', {
        rules: [
          {
            required: true,
            message: 'Please input your username!',
          },
        ],
      })(<Input placeholder="Username" />)}
    </Form.Item>
  </Form>
);

2. 在校验规则中添加`validateStatus`和`help`属性，分别用于设置校验状态和校验提示信息。

const CustomizedInput = () => (
  <Form>
    <Form.Item>
      {getFieldDecorator('username', {
        rules: [
          {
            required: true,
            message: 'Please input your username!',
            validateStatus: 'error', // 校验失败时的状态
            help: 'Username is required!', // 校验失败时的提示信息
          },
        ],
      })(<Input placeholder="Username" />)}
    </Form.Item>
  </Form>
);

3. 在CSS中定义校验状态对应的样式。

.ant-form-item-has-error .ant-input {
  border-color: #f5222d;
  box-shadow: none;
}
.ant-form-item-has-error .ant-form-explain,
.ant-form-item-has-error .ant-form-split {
  color: #f5222d;
}

以上就是使用Ant Design的Input组件自定义校验样式的方法。