I'm trying to customize antd ant-row class within my form component 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;

}