Antd: How to change Antd Form.Item label text color?

Question

I am using antd npm package for Next.js project. I am struggling with changing label text color for Form.Item component.

I am trying below but its not changing label color.

<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

Use 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;
}

See CodeSandbox example:

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

Update

You can also pass JSX to the Form.Item label attribute, so this will work:

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