在必填字段中将星号设为红色（React，Ant 设计）

Question

我是编程新手，需要您的帮助。 目前我正在开发我所谓的宠物项目并面临挑战。 我正在使用 ReactJS 和 Ant 设计进行造型。 所以，问题是我想在所需的输入元素中放一个红色星号作为占位符（希望我说清楚）。 我发现了一些变体可以使用纯 CSS 解决以下问题，但我想改用 Ant 设计组件。 这是我的表单代码：

<div className="form-wrapper">
  <Form {...formItemLayout} form={form} name="register" scrollToFirstError onFinish={onFinish}>
    <Title level={2} className="justify-content-center register-title">
      Registration
    </Title>
    <Form.Item
      className="justify-content-center"
      name="name"
      rules={[
        {
          required: true,
          message: 'Please input your nickname!',
          whitespace: true,
        },
      ]}
    >
      <Input className="custom-register-input" placeholder="Name *" />
    </Form.Item>
    <Form.Item
      className="justify-content-center"
      name="fullName"
      rules={[
        {
          required: true,
          message: 'Please input your full name!',
          whitespace: true,
        },
      ]}
    >
      <Input className="custom-register-input" placeholder="Surname *" />
    </Form.Item>
    <Form.Item
      className="justify-content-center"
      name="email"
      rules={[
        {
          type: 'email',
          message: 'The input is not valid E-mail!',
        },
        {
          required: true,
          message: 'Please input your E-mail!',
        },
      ]}
    >
      <Input className="custom-register-input" placeholder="E-mail *" />
    </Form.Item>
    <Form.Item
      className="justify-content-center"
      name="password"
      rules={[
        {
          required: true,
          message: 'Please input your password!',
        },
      ]}
      hasFeedback
    >
      <Input.Password className="custom-register-input" placeholder="Password *" />
    </Form.Item>

而且我不知道如何执行此任务（（我将不胜感激您的帮助！

这是输入的想法

Answer 1

我不知道这是否是您想要的确切答案，但您可以使用 input 的后缀道具来传递图标并使颜色变为红色。

 <Form.Item label="Email" name="email" rules={[{ required: true, message: "Please input your email:" }]} style={{ width: "100%" }}> <Input suffix={<RandomIcon style={{ color, 'red'. }} />} /> </Form.Item>

注意：不要忘记用星号图标替换“RandomIcon”。 希望这可以帮助。