Antd表单必填项红色*位置调整：移至标签右侧

Antd表单默认会在必填字段的标签左侧添加红色星号，若要将其调整到标签右侧，可通过以下两种方式实现：

方法一：全局CSS样式覆盖 #

Antd的必填星号通过.ant-form-item-required类的:before伪元素实现，我们可以隐藏原伪元素，改用:after伪元素在标签右侧添加星号。在你的index.css文件中添加以下样式：

/* 垂直布局场景 */
.ant-form-item-label > .ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
  display: none;
}
.ant-form-item-label > .ant-form-item-required:not(.ant-form-item-required-mark-optional)::after {
  content: "*";
  color: #ff4d4f;
  margin-left: 4px;
}

/* 若项目包含水平布局，补充以下样式 */
.ant-form-horizontal .ant-form-item-label > .ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
  display: none;
}
.ant-form-horizontal .ant-form-item-label > .ant-form-item-required:not(.ant-form-item-required-mark-optional)::after {
  content: "*";
  color: #ff4d4f;
  margin-left: 4px;
}

该方法会全局生效，适合整个项目统一调整星号位置的需求。

方法二：自定义单个字段的Label #

如果仅需调整个别字段的星号位置，可手动在Label中添加星号，并关闭Form.Item自带的必填标记避免重复：

<Form.Item 
  label={<span>Field A <span style={{color: '#ff4d4f'}}>*</span></span>} 
  required={false}
>
  <Input placeholder="input placeholder" />
</Form.Item>

修改后的完整示例代码 #

import React, { useState } from 'react';
import './index.css';
import { Button, Form, Input, Radio } from 'antd';

type RequiredMark = boolean | 'optional';

const App: React.FC = () => {
  const [form] = Form.useForm();
  const [requiredMark, setRequiredMarkType] = useState<RequiredMark>('optional');

  const onRequiredTypeChange = ({ requiredMarkValue }: { requiredMarkValue: RequiredMark }) => {
    setRequiredMarkType(requiredMarkValue);
  };

  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={{ requiredMarkValue: requiredMark }}
      onValuesChange={onRequiredTypeChange}
      requiredMark={requiredMark}
    >
      <Form.Item label="Required Mark" name="requiredMarkValue">
        <Radio.Group>
          <Radio.Button value="optional">Optional</Radio.Button>
          <Radio.Button value>Required</Radio.Button>
          <Radio.Button value={false}>Hidden</Radio.Button>
        </Radio.Group>
      </Form.Item>
      <Form.Item 
        label={<span>Field A <span style={{color: '#ff4d4f'}}>*</span></span>} 
        required={false}
      >
        <Input placeholder="input placeholder" />
      </Form.Item>
    </Form> 
  );
};

export default App;

内容的提问来源于stack exchange，提问作者halahlou