Ant design Form.Item validation style

Question

Is it possible to add a className prop to the Form.Item validation?

<Form.Item name="username" rules={[
   { required: true, message: '...' },
   className="customValidation" //<- something like that, but it is not working
]}>

Edit: Overriding the ant styles is not a valid solution!

Answer 1

If you want to change style of validation messages/input border color without using className property you can use the following solution.

Following code will change the error message color and input border color from red to blue (You can add your CSS properties).

index.css

.ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant- input, 
.ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper, 
.ant-form-item-has-error :not(.ant-input-number-affix-wrapper-disabled):not(.ant-input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper, 
.ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover, 
.ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover, 
.ant-form-item-has-error :not(.ant-input-number-affix-wrapper-disabled):not(.ant-  input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper:hover {
 background-color: #fff;
 border-color: blue;
 }

.ant-form-item-explain-error {
   color: blue;
 }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button } from 'antd';

const Demo = () => {
const onFinish = (values) => {
console.log('Success:', values);
};

const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
 };

 return (
<Form
  name="basic"
  labelCol={{
    span: 8,
  }}
  wrapperCol={{
    span: 16,
  }}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}
>
  <Form.Item
    label="Username"
    name="username"
    rules={[
      {
        required: true,
        message: 'Please enter your username!',
      },
    ]}
  >
    <Input />
  </Form.Item>

  <Form.Item
    wrapperCol={{
      offset: 8,
      span: 16,
    }}
  >
    <Button type="primary" htmlType="submit">
      Submit
    </Button>
  </Form.Item>
</Form>
);
};
export default Demo;

Answer 2

I think it is impossible, There is not the attribute to add the className in antd Form.Item

If you want you can use the styled-component

I add my example code for you below.

export const CustomItem = styled(Form.Item)`
  .ant-form-item-explain.ant-form-item-explain-error {
    color: blue;
  }
`

-------------------------------------------

<CustomItem
    name='name'
    label='Name'
    rules={[{ required: true }]}
>
    <Input
        size='large'
        autoComplete='name'
    />
</CustomItem>

It was working for me.

Answer 3

I created a Issue on GitHub and and they answered with

Form.Item supports className on it now.

https://github.com/ant-design/ant-design/issues/34110