Change form.item label font size in AntD

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

Thedathedric

you want to change formItem label or option label??? – Shadowgraph

I want to change formItem label – Thedathedric

Answer 1

There are multiple options to override style elements.

1. You can directly override label elements from global CSS files like:

label { 
   font-size:16px;
}

2. Individual element by adding a script to the 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>

Coacervate

Answer 2

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

Osmen

Answer 3

add css:

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

Capitulum

Answer 4

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>

Shadowgraph

HI Afaq Ahmed Khan did you get it? – Shadowgraph

hey @sathish I couldn't figure out how this would work – Thedathedric

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>

Fellatio