Как настроить / переопределить стили ANDD?

Question

Я пытаюсь настроить класс antd ant-row внутри компонента формы, чтобы я мог изменять высоту между полями ввода.Я определил другое имя класса для своей формы и попытался изменить его в файле CSS, однако оно не изменяется и не применяется.Может кто-нибудь помочь, пожалуйста?

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

Answer 1

Вам нужно стилизовать компонент Form.Item, например, с помощью inline-style :

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

или всего Form, переопределив, например, класс cssс CSS-in-JS :

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

Демо:

Та же банкадостичь с помощью файла .css и импортировать его

Answer 2

antd предоставляет вам МЕНЬШЕ переменных, которые вы можете переопределить .

Конечно, это не удовлетворяет всем условиям.Но если ваши стили не применяются, проблема связана с весом селектора CSS и с тем, как рассчитывается специфичность, т.е. ваш селектор недостаточно специфичен для переопределения стилей antd.Вы должны изменить ваши селекторы, чтобы иметь более высокую специфичность.

Подробнее об этом можно прочитать здесь .