Ant Design (antd) Form 组件中必填项的星号（*）从标签左侧移到右侧

你希望把 Ant Design (antd) Form 组件中必填项的星号（*）从标签左侧移到右侧，这个需求在实际开发中很常见。

实现方案

Ant Design 本身没有直接的配置项来修改星号位置，但可以通过 CSS 样式覆盖 的方式轻松实现，这种方法兼容性好且不影响其他功能。

1. 基础实现（全局生效）

如果你希望所有表单的必填星号都移到右侧，可以在全局样式文件（如 index.css、App.css）中添加以下样式：

css 复制代码

/* 隐藏原有的左侧星号 */
.ant-form-item-required::before {
  display: none !important;
}

/* 在标签右侧添加星号 */
.ant-form-item-required::after {
  content: '*';
  color: #ff4d4f; /* 保持和antd默认星号一致的红色 */
  margin-left: 4px; /* 星号和文字之间的间距，可调整 */
  font-size: 14px;
}

2. 局部生效（指定表单）

如果你只想让某个特定表单生效，避免影响全局样式，可以给表单添加自定义 className，再针对性写样式：

jsx 复制代码

import { Form, Input, Button } from 'antd';
import './CustomForm.css'; // 引入自定义样式文件

const MyForm = () => {
  return (
    {/* 添加自定义类名 */}
    <Form className="custom-form" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入密码' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

对应的 CustomForm.css 样式：

css 复制代码

/* 只对.custom-form下的表单生效 */
.custom-form .ant-form-item-required::before {
  display: none !important;
}

.custom-form .ant-form-item-required::after {
  content: '*';
  color: #ff4d4f;
  margin-left: 4px;
  font-size: 14px;
}

3. 进阶：兼容 label 为组件的场景

如果你的 Form.Item label 是自定义组件（如包含图标），可以稍作调整，确保星号位置正确：

css 复制代码

.ant-form-item-required > label::after {
  content: '*';
  color: #ff4d4f;
  margin-left: 4px;
  font-size: 14px;
}
.ant-form-item-required > label::before {
  display: none !important;
}

关键说明

!important 是为了覆盖 antd 内置的默认样式优先级，确保修改生效。
颜色值 #ff4d4f 是 antd 官方默认的危险色/必填星号色，保持视觉统一。
间距 margin-left: 4px 可根据你的设计稿调整，建议和原星号间距一致。

总结

修改必填星号位置的核心是隐藏原左侧星号 ，并在标签后添加新的星号。
通过 CSS 类名限定（如 .custom-form）可实现局部生效，避免影响全局。
样式属性（颜色、间距）建议和 antd 默认值保持一致，保证视觉统一。