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

antd为您提供了override可以较少的变量。

当然，这并不满足所有条件。但是如果您的样式没有被应用，则问题与CSS选择器权重以及如何计算特异性有关，即您的选择器不够具体，无法覆盖antd样式。您需要更改选择器以具有更高的特异性。

您可以详细了解here。

Answer 2

您需要设置Form.Item组件的样式，例如，使用内联样式：

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

或通过覆盖css类（例如，使用 CSS-in-JS ）来整个Form：

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

演示：

使用.css文件并导入该文件即可实现

如何自定义/覆盖antd样式？

2 个答案: