Antd: 如何改变Antd Form.Item标签文本的颜色?

问题描述 投票:0回答:1

我使用的是 antd Next.js项目的npm包.我在为Next.js项目改变标签文本颜色时遇到了困难。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>
antd ant-design-pro
1个回答
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.iosantdesign-how-to-style-form-labels-soubk。

更新

您也可以通过 labelForm.Item JSX,所以这个可以用。

  <Form.Item
        label={<label style={{ color: "red" }}>Username</label>}
        name="username"
        rules={[
          {
            required: true,
            message: "Please input your username!"
          }
        ]}
      >
        <Input />
      </Form.Item>
© www.soinside.com 2019 - 2024. All rights reserved.