AntD中更改form.item标签字体大小答案

【问题标题】：Change form.item label font size in AntDAntD中更改form.item标签字体大小
【发布时间】：2019-09-11 14:14:54
【问题描述】：

我正在使用类似这样的样式化组件

const FormItem = styled(Form.Item)`
     font-size: 16px;
`;

使用类似这样的表单项

    <FormItem label="System Pressurized">
    {getFieldDecorator('systemPressurized')(
      <Select defaultValue="" placeholder="Select Type">
        <Option value="Yiminghe">yiminghe</Option>
      </Select>,
    )}
  </FormItem>

我尝试过更改 AntD 的字体大小，但它似乎没有锻炼

【问题讨论】：

你想改变formItem标签或选项标签？？？
我要更改 formItem 标签

标签： javascript reactjs antd styled-components typography

【解决方案1】：

then use it like this


<!-- language: lang-js -->

    const formItemLayout =
      formLayout === 'horizontal' ?
      {
        labelCol: {
          span: 4,
          style: {
            "text-align": "left",
            "font-size": "12px"
          }
        },
        wrapperCol: {
          span: 30,
        },
      } :
      null;

<!-- end snippet -->

//then use it like this
<Form
  {...formItemLayout}
  layout={formLayout}
  form={form}
  initialValues={{
      layout: formLayout,
  }}
>
  <Form.Item
    label={"Full Name"}
    name="username"
    id="name"
    style={{ display: "flex", flexDirection: "column" }}
    defaultValue={name}
    onChange={handleChange()}
    rules={[
        {
            required: true,
            message: 'Please input your name!',
        },
    ]}
    >
    <Input />
  </Form.Item>
</Form>

【讨论】：

【解决方案2】：

请在您的代码中覆盖 CSS，例如

$ .ant-form-item-label>label {
     font-size: 16px;
 }

您可以直接覆盖 global.less 文件中的 CSS，例如

 & .ant-form-item-label {
    & > label {
     font-size: 16px;
    }
 }

你可以为此编写 JSX

<FormItem label = {
 <p style={{fontSize: "16px"}}>System Pressurized</p>}>
{getFieldDecorator('systemPressurized')(
  <Select defaultValue="" placeholder="Select Type">
    <Option value="Yiminghe">yiminghe</Option>
  </Select>,
)}

【讨论】：

【解决方案3】：

有多个选项可以覆盖样式元素。

您可以直接覆盖全局 css 文件中的标签元素，例如

 label { 
   font-size:16px;
}

通过将脚本添加到标签元素的单个元素。

   <FormItem label={ 
<p style={{fontSize:"16px"}}>"System Pressurized"</p>
}>
{getFieldDecorator('systemPressurized')(
<Select defaultValue="" placeholder="Select Type">
   <Option value="Yiminghe">yiminghe</Option>
</Select>
)
}
</FormItem>

【讨论】：

【解决方案4】：

添加css：

.ant-form-item-label label{
   font-size: 16px;
}

【讨论】：

【解决方案5】：

您有两种方式来设置 formItem 标签的样式

//way one :
//You can override the default css by override below selectors
.form-section .form-group label{
  font-size : 20px
  //YOUR CUSTOM STYLE
}

// way two : 
// You can pass custom component like below : 
  <FormItem label={<p style={YOURCUSTOMSTYLEOBJECT}>System Pressurized</p>}>
    {getFieldDecorator('systemPressurized')(
      <Select defaultValue="" placeholder="Select Type">
        <Option value="Yiminghe">yiminghe</Option>
      </Select>,
    )}
  </FormItem>

【讨论】：

嗨，Afaq Ahmed Khan 你明白了吗？
嘿@sathish 我不知道这是如何工作的