Search code examples
cssreactjsantdcss-modules

How to remove padding in antd form label


I have a Form control, rendering an Antd Form.Item:

const FormEditData: React.FC<FormEditDataProps> = ({ label, name, field, rules, customProps, children }) => {
    const namePath = [name].concat('value')
    const isEditable = field?.fieldAccess > 0
    if (isEditable) {
        return (
            <Form.Item
                label={label}
                name={namePath}
                className={css.FormEditItem}
                rules={rules}
                {...customProps}
            >
                { children}
            </Form.Item >
        )
    }
    return null
}

export { FormEditData }

This is rendering as:

<div class="ant-row ant-form-item FormEditItem___2R86H">
  <div class="ant-col ant-form-item-label">
    <label for="form-2_employeeLastName_value" class="ant-form-item-required" title="Nachname">Nachname</label>
  </div>
  <div class="ant-col ant-form-item-control">
    <div class="ant-form-item-control-input">
      <div class="ant-form-item-control-input-content">
        <input type="text" id="form-2_employeeLastName_value" class="ant-input" value="Bar">
      </div>
    </div>
  </div>
 </div>

With a css module defined as:

.FormEditItem {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

.FormEditItem  div {padding: 0;}

The margin to the .FormEditItem is applied correctly, but I want the padding of the child div with the class annotation ant-col ant-form-item-label changed from 0 0 8px to 0

However I seem to be unable to find a suitable path to that element, so that it gets styled properly.

Tested paths:

 .FormEditItem div {padding: 0;} //not specified enough
 .FormEditItem div.ant-col {padding: 0;} // not applied
 .FormEditItem div.ant-col.ant-form-item-label {padding: 0;} // not applied 
 .FormEditItem .ant-col {padding: 0;} // not applied 
 .FormEditItem .ant-col.ant-form-item-label {padding: 0;} // not applied 

Solution

  • To apply this change on a global level, we can resolve this by editing a less-variable and apply a custom theme.

    The corresponding variable is defined here: https://github.com/ant-design/ant-design/blob/ea2545fbc7d02df4efa1b77467672a681158fec0/components/style/themes/default.less#L373

    @form-vertical-label-padding: 0;