在 AntD 中更改 form.item 標簽字體大小

Question

我正在使用類似這樣的樣式組件

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 的字體大小，但它似乎沒有鍛煉

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>

Answer 2

您有兩種設置 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>

Answer 3

添加css：

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

Answer 4

請在您的代碼中覆蓋 CSS，例如

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

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

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

2. 你可以為此編寫 JSX

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