html - 如何在 Ant 设计中为下拉菜单编写自定义 CSS

Question

我正在使用 Ant 设计我有表单在我有两个输入标签和一个下拉列表中，我已经为前两个输入标签编写了自定义 css，我正在尝试应用相同的自定义 css，但它不能正常工作。当我从下拉列表中选择任何内容时，它的大小正在减小，请帮助我解决这两个问题。

这是 App.js

import React from "react";
import 'antd/dist/antd.css';
import { Form, Input, Row, Col, Select } from 'antd';
import "./App.css";

const App = () => {
  const { Option } = Select;
  return (
    <div>
      <Row style={{ justifyContent: "center", marginTop: "50px" }}>
        <Col span="8" style={{backgroundColor: "red"}}>
          <Form layout="inline">
            <Form.Item>
              <Input style={{ paddingTop: "10px", paddingBottom: "10px", marginBottom: "5px", marginLeft: "30px", marginTop: "10px" }}
                placeholder="Firstname"
              />
            </Form.Item>
            <Form.Item>
              <Input style={{ paddingTop: "10px", paddingBottom: "10px", marginBottom: "5px", marginLeft: "35px", marginTop: "10px" }}
                placeholder="Lastname"
              />
            </Form.Item>
            <Form.Item hasFeedback style={{ paddingTop: "10px", paddingBottom: "10px", marginBottom: "5px", marginLeft: "30px", marginTop: "10px" }}>
            <Select placeholder="Please select a country">
              <Option value="china">China</Option>
              <Option value="usa">U.S.A</Option>
            </Select>
        </Form.Item>
          </Form>
        </Col>
      </Row>
    </div>
  )
}

export default App

如果您有任何问题，请告诉我。谢谢是提前

标签： htmlcssreactjsant-design-pro