Ant 設計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 styles 不是有效的解決方案！

Answer 1

如果您想在不使用 className 屬性的情況下更改驗證消息/輸入邊框顏色的樣式，您可以使用以下解決方案。

以下代碼會將錯誤消息顏色和輸入邊框顏色從紅色更改為藍色（您可以添加 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;
 }

索引.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 Form.Item中沒有添加className的屬性

如果你願意，你可以使用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 現在支持 className 了。

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