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

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 文件并导入它也可以实现：

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

Answer 2

antd 为您提供更少的变量，您可以使用override。

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

您可以阅读更多关于它的信息here。