Ant design Form.Item 验证样式

Question

是否可以将 className 属性添加到 Form.Item 验证中？

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

编辑：覆盖 ant 样式不是有效的解决方案！

Answer 1

如果你想在不使用 className 属性的情况下更改验证样式 messages/input 边框颜色，你可以使用以下解决方案。

以下代码会将错误消息颜色和输入边框颜色从红色更改为蓝色（您可以添加 CSS 属性）。

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

我觉得不可能，antd中没有添加className的属性Form.Item

如果需要，可以使用 styled-component

我在下面为您添加我的示例代码。

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>

它对我有用。

Answer 3

我在 GitHub 上创建了一个问题，他们用

回答了

Form.Item supports className on it now.

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

Ant design Form.Item 验证样式

Ant design Form.Item validation style

javascript

typescript

reactjs

antd