我使用的是 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>
使用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。
更新
您也可以通过 label
撑 Form.Item
JSX,所以这个可以用。
<Form.Item
label={<label style={{ color: "red" }}>Username</label>}
name="username"
rules={[
{
required: true,
message: "Please input your username!"
}
]}
>
<Input />
</Form.Item>