How to remove padding in antd form label

user_1249641 0
Viewed 1103

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
css-modules antd reactjs css
3 Answers
user_12496410

Using css I tried this in my custom style.css file

.ant-col.ant-form-item-label {
    padding: 0 !important; 
}

NOTE: Your custom css file should be imported after all other third-party css flies

user_182223560

try this, add property requiredMark and set value to false like this : requiredMark={false} in Form.Item component

<Form.Item
 label={label}
 name={namePath}
 rules={rules}
 requiredMark={false} //add this
 {...customProps}
>
 { children}
</Form.Item >
user_163813600
Related