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

Question

我正在尝试在我的表单组件中自定义 antd ant-row 类，以便我可以更改输入字段之间的高度。 我已经为我的表单定义了一个不同的类名，并尝试在 css 文件中修改它，但是它没有被修改或应用。 有人可以帮忙吗？

表单.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>

样式.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>

或者通过覆盖 css-class 来覆盖整个Form ，例如使用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为您提供了可以覆盖的LESS 变量。

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

您可以在此处阅读更多相关信息。