reactjs - Antd:如何更改 Antd Form.Item 标签文本颜色？

Question

我正在为 Next.js 项目使用 antd npm 包。我正在努力更改 Form.Item 组件的标签文本颜色。

我在下面尝试，但它没有改变标签颜色。

<Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 20 }} labelAlign="left" initialValues={{ size: "middle" }}
  size={"middle"} onFinish={onFinish} style={{ color: "#fff" }}>
  <Form.Item label="City" name="city" style={{ color: "#fff" }}>
    <Input />
  </Form.Item>
</Form>

Answer 1

使用 CSS:

<Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Username"
        name="username"
        style={{ color: "red" }}
        rules={[
          {
            required: true,
            message: "Please input your username!"
          }
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: "Please input your password!"
          }
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>

[title="Username"] {
  color: red !important;
}

[title="Password"] {
  color: blue !important;
}

参见 CodeSandbox 示例:

https://codesandbox.io/s/antdesign-how-to-style-form-labels-soubk

更新

您也可以在 Form.Item JSX 上传递 label 属性，这样就可以了:

  <Form.Item
        label={<label style={{ color: "red" }}>Username</label>}
        name="username"
        rules={[
          {
            required: true,
            message: "Please input your username!"
          }
        ]}
      >
        <Input />
      </Form.Item>