I'm trying to customize antd ant-row class within my form ponent so I can change the height between input fields. I have defined a different class name to my form and tried to do modify it in the css file however it's not being modified or applied. Can someone please help?

Form.js

 {this.state.active2 && (
          <Form
            style={{
              position: 'relative',
              zindex: '2',
              left: '35%',
              overflow: 'initial',
              width: '300px',
            }}
            onSubmit={this.handleSubmit}
            className="login-form"
            layout={formLayout}>

            <Form.Item>
            <Form.Item label="Full name" {...formLayout}>
              {form.getFieldDecorator('username', {
                rules: [{ required: true, message: 'Please input your username!' }],
              })(
                <Input
                  prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="input placeholder" 
                />,
              )}
            </Form.Item>

            </Form.Item>

styles.scss

 .login-form.ant-row {
    position: relative !important;
    height: 70px !important;
    margin-left: 0 !important;
    zoom: 1 !important;
    display: block !important;
    box-sizing: border-box !important;
}

I'm trying to customize antd ant-row class within my form ponent so I can change the height between input fields. I have defined a different class name to my form and tried to do modify it in the css file however it's not being modified or applied. Can someone please help?

Form.js

 {this.state.active2 && (
          <Form
            style={{
              position: 'relative',
              zindex: '2',
              left: '35%',
              overflow: 'initial',
              width: '300px',
            }}
            onSubmit={this.handleSubmit}
            className="login-form"
            layout={formLayout}>

            <Form.Item>
            <Form.Item label="Full name" {...formLayout}>
              {form.getFieldDecorator('username', {
                rules: [{ required: true, message: 'Please input your username!' }],
              })(
                <Input
                  prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="input placeholder" 
                />,
              )}
            </Form.Item>

            </Form.Item>

styles.scss

 .login-form.ant-row {
    position: relative !important;
    height: 70px !important;
    margin-left: 0 !important;
    zoom: 1 !important;
    display: block !important;
    box-sizing: border-box !important;
}

• javascript
• reactjs
• antd

• Are you trying to adjust the margin between every Form.Item? – Dennis Vash Commented Jun 17, 2019 at 20:25
• yes right now they are very far apart from each other i would like to get them closer to each other – Leo Bogod Commented Jun 17, 2019 at 20:42

2 Answers 2

You need to style the Form.Item ponent, for example with inline-style:

// The current form item is margin 15px top.
<Form.Item style={{ marginBottom: "0px" }}>
  <Input />
</Form.Item>

Or the entire Form by overriding the css-class, for example with CSS-in-JS:

// Apply style to all form
const StyledForm = styled(Form)`
  .ant-form-item {
    margin-bottom: 0px;
  }
`;

Demo:

Same can be achieved with .css file and importing it:

:global .ant-form-item {
    margin-bottom: 0;
}

antd provides you with LESS variables you can override.

Of course, this doesn't satisfy every condition. But if your styles are not being applied, the problem has to do with CSS selector weight, and how specificity is calculated i.e. your selector is not specific enough to override antd styles. You need to change your selectors to have a higher specificity.

You can read more about it here.