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

Question

I'm using styled components something like this

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

Using Form Item something like this

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

I've tried changing font size of AntD but it doesn't seem to workout

Answer 1

There are multiple options to override style element.

1. You can directly override label element from global css file like

 label { 
   font-size:16px;
}

2. Individual element by adding script to label element.

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

Answer 2

you have two way to style the formItem label

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

Answer 3

add css:

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

Answer 4

Please override CSS in your code like

$ .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>, )}

Answer 5

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>