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>
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 the label prop on Form.Item JSX, 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>