如何将 css 应用于表单中的特定占位符

我正在研究一个 React 项目，并且为了设计我使用了 Ant 设计框架。我想要做的是我有表单，因为我有四个 Input 标签，我需要为第三个 Input 标签添加一些更改，我想要做的是为第三个 Input 标签我试图给margin-left。但我不知道该怎么做，所以有人帮我解决这个问题。

这是我的代码 App.js

import React from "react";
import 'antd/dist/antd.css';
import { Row, Col, Button, Form, Card, Input, DatePicker } from 'antd';
import { SearchOutlined, StopOutlined } from '@ant-design/icons';
import "./App.css";


const App = () => {
  return (
    <div>
      <Row>
<Col className="main" span={18}>
          <div className="customizedCards">
            <Card>
              <Col className="main" span={7}>
                <div className="main-form">
                  <h5 className="idDetails">ID DETAILS</h5>
                  <Form>
                    <Form.Item>
                      <Input className="firstInput common" placeholder="Name" />
                    </Form.Item>
                    <Form.Item>
                      <Input className="secondInput common" placeholder="ID Number" />
                    </Form.Item>
                    <Form.Item>
                      <DatePicker className="date" placeholder="Expiration Date" format="YYYY-MM-DD HH:mm:ss" />
                    </Form.Item>
                    <Form.Item>
                      <Input className="fourthInput common" placeholder="Issue Date" />
                    </Form.Item>
                  </Form>
                </div>
              </Col>
            </Card>
          </div>
        </Col>
      </Row>
 </div>
  )
}

export default App

这是 App.css

.idDetails {
  font-weight: bold;
}

.common {
  padding-top: 5px;
  padding-bottom: 10px;
  border-radius: 4px;
}

.date {
  padding-left: 121px;
  padding-top: 5px;
  padding-bottom: 10px;
  border-radius: 4px;
}


````