Блог

Я работаю с дизайном муравьев, У меня есть форма, в которой у меня есть два входных тега и один раскрывающийся список, я написал пользовательский 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


 

Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать. Спасибо заранее