antd 修改formItem 的label颜色
时间: 2024-05-08 13:19:13 浏览: 6
可以使用自定义样式来修改formItem的label颜色,样例代码如下:
```
<FormItem
label="姓名"
labelCol={{ span: 6 }}
>
{getFieldDecorator('name', {
rules: [{ required: true, message: '请输入你的姓名!' }],
})(
<Input placeholder="请输入你的姓名!" />
)}
</FormItem>
// 自定义样式
.ant-form-item-label {
color: red;
}
```
相关问题
antd form给label添加class
可以在FormItem组件中的label属性中添加className属性,来给label元素添加class。例如:
```jsx
<FormItem label="姓名" labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
<Input />
</FormItem>
// 给label元素添加class
<FormItem label="姓名" labelCol={{ span: 6 }} wrapperCol={{ span: 14 }} label={<span className="custom-label">姓名</span>}>
<Input />
</FormItem>
```
在上面的代码中,我们将label属性的值改为了一个自定义的span元素,并为该元素添加了一个class名为"custom-label"的class。这样就可以为label元素添加样式了。
antd FormItem组件如何设置label的宽度
可以使用 `labelCol` 属性来设置 label 的宽度,示例代码如下:
```jsx
<FormItem label="Label" labelCol={{ span: 6 }}>
<Input />
</FormItem>
```
其中 `labelCol={{ span: 6 }}` 表示 label 所在的列宽度为 6 格,可以根据需要调整具体的值。