Antd，Form，无标签，但我想显示所需的红色标记

Posted 2023-02-18

【中文标题】Antd，Form，无标签，但我想显示所需的红色标记

【英文标题】：Antd, Form, No label but I want to display required red mark

【发布时间】：2021-03-10 01:30:27

【问题描述】：

我在我的 reactjs 项目中使用 Ant 设计。没有标签，设计更好，但所需的红色标记消失了。如果可能的话，我想要它回来。

谢谢

<Form
  name="normal_login"
  className="login-form"
  initialValues= remember: true 
  onFinish=onFinish
>
  <Form.Item
    name="username"
    rules=[ required: true, message: 'Please input your Username!' ]
  >
    <Input prefix=<UserOutlined className="site-form-item-icon" /> placeholder="Username" />
  </Form.Item>
  <Form.Item
    name="password"
    rules=[ required: true, message: 'Please input your Password!' ]
  >
    <Input
      prefix=<LockOutlined className="site-form-item-icon" />
      type="password"
      placeholder="Password"
    />
  </Form.Item>
  <Form.Item>
    <Form.Item name="remember" valuePropName="checked" noStyle>
      <Checkbox>Remember me</Checkbox>
    </Form.Item>

    <a className="login-form-forgot" href="">
      Forgot password
    </a>
  </Form.Item>

  <Form.Item>
    <Button type="primary" htmlType="submit" className="login-form-button">
      Log in
    </Button>
    Or <a href="">register now!</a>
  </Form.Item>
</Form>

【参考方案1】：

    .ant-form-item-label > 
label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before
        content:none;
    

【讨论】：

我使用@Raman Nikitsenka 的答案，但那不起作用，所以我写了我的解决方案。

【参考方案2】：

可能我的解决方案不够好。但无论如何它都有效

<Form.Item
  label=<span></span>
  name="name"
  rules=[ required: true, message: "This field is required" ]
>
  <Input />
</Form.Item>

只需在 css 中隐藏它

.ant-form-item-required span 
  display: none;


.ant-form-item-required:after 
  display: none;