Antd：如何更改 Antd Form.Item 标签文本颜色？

Posted 2023-03-07

【中文标题】Antd：如何更改 Antd Form.Item 标签文本颜色？

【英文标题】：Antd: How to change Antd Form.Item label text color?

【发布时间】：2020-10-02 23:00:46

【问题描述】：

我正在为 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>

【参考方案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>