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

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

您可以直接覆盖全局 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>

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

你可以直接覆盖 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>,
)}

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

4 个答案: