css - 如何修复 react-datepicker 总是移到下一行并将其他人推到下一行

Question

我有一个react组件，我在其中input使用react-datepicker. 问题是，react-datepicker元素总是移动到下一行，而不是所有字段都在同一行。虽然顶部div被声明为flex. 如果我删除react-datepicker然后元素正确对齐。一旦datepicker添加，表单就会失去样式。

<App /> component：

return (
<div className="container">
  <div className="app-wrapper">
    <div>
      <Form />
    </div>
  </div>
</div>

);

<Form /> component如下所示：

   return (
    <form onSubmit={onFormSubmit}>
      <input
        type="text"
        className="task-title"
      />
      <input
        type="text"
        className="task-description"
      />
      <DatePicker
        className="datePicker"
        selected={dueDate}
        onChange={onDueDateChange}
        name="Date"
        dateFormat="yyyy-MM-dd"
      />
      <button type="submit" className="button-add" />
    </form>
  );

CSS：

 .container {
  display: flex;
  background: linear-gradient(to right bottom, #82cbe1, #66acc8);
  width: 100%;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}

.app-wrapper {
  background-color: #94b2c4;
  min-width: 0;
  min-height: 0;
  padding: 30px;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 3px 6px 40px #000;
  margin-bottom: 10px;
}

.task-description {
  outline: none;
  width: 450px;
  padding: 15px;
  margin-right: 5px;
  font-size: 20px;
  color: #ccc;
  background-color: #000000;
  border: 1px solid #66acc8;
  border-radius: 10px;
}

.datePicker {
  outline: none;
  width: 140px;
  padding: 15px;
  margin-right: 5px;
  font-size: 20px;
  color: #ccc;
  background-color: #000000;
  border: 1px solid #66acc8;
  border-radius: 10px;
}

.task-title,
.task-description,
.datePicker,
.button-add {
  margin-bottom: 10px;
}

.button-add {
  width: 60px;
  padding: 15px 15px;
  font-size: 20px;
  border-radius: 10px;
  border: 0;
  background-color: #71def1;
  cursor: pointer;
}

标签： cssreactjsflexboxreact-datepicker