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