在AntD中更改表单项标签字体大小

Question

我正在使用 styled-components，类似于以下代码：

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的字体大小，但似乎没有效果。

- Afaq Ahmed Khan

---

你想要更改formItem标签还是选项标签？ - sathish kumar

我想要更改formItem标签。 - Afaq Ahmed Khan

Answer 1

有多种选择可以覆盖样式元素。

1. 您可以直接从全局CSS文件中覆盖标签元素，例如：

label { 
   font-size:16px;
}

2. 通过向标签元素添加脚本，可以对单个元素进行操作：

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

- Siddharth Bagal

Answer 2

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

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

1. You can directly override the CSS in global.less file like

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

2. You can write JSX for this

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

- Force Bolt

Answer 3

添加 CSS：

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

- Henry Le

Answer 4

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>

- Ali Awais

Answer 5

你有两种方法来设置表单项的标签样式

//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>

- sathish kumar

---

你好，Afaq Ahmed Khan，你收到了吗？ - sathish kumar

嘿@sathish，我无法弄清楚这个如何工作。 - Afaq Ahmed Khan