[英]Ant design Form.Item validation style
Is it possible to add a className prop to the Form.Item validation?是否可以将 className 道具添加到 Form.Item 验证中?
<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!编辑:覆盖 ant styles 不是有效的解决方案!
If you want to change style of validation messages/input border color without using className property you can use the following solution.如果您想在不使用 className 属性的情况下更改验证消息/输入边框颜色的样式,您可以使用以下解决方案。
Following code will change the error message color and input border color from red to blue (You can add your CSS properties).以下代码会将错误消息颜色和输入边框颜色从红色更改为蓝色(您可以添加 CSS 属性)。
index.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索引.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;
I think it is impossible, There is not the attribute to add the className in antd Form.Item我觉得不可能,antd Form.Item中没有添加className的属性
If you want you can use the styled-component如果你愿意,你可以使用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.它对我有用。
I created a Issue on GitHub and and they answered with我在 GitHub 上创建了一个问题,他们回答了
Form.Item supports className on it now. Form.Item 现在支持 className 了。
https://github.com/ant-design/ant-design/issues/34110 https://github.com/ant-design/ant-design/issues/34110
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.