材质 UI 日期选择器伸出

Question

这是我的材料 ui 日期选择器的样子：

如您所见，它非常伸展。这是我的代码：

import React, { useState } from "react";
import styled from "styled-components";
import Main from "../../Templates/Main";
import DatePicker from "./../../Components/DatePicker";
import DateFnsUtils from "@date-io/date-fns"; // choose your lib
import {
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";


const SearchBarContainer = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 70%;
  max-height: 60px;
  background-color: white;
  border-radius: 8px;
  padding: 10px 25px;
`;

const SearchInputContainer = styled.div`
  max-height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border: none;
  outline: none;

  font-family: P-Semi;
  font-size: 14px;
`;


const TitleContainer = styled.div`
  width: 100%;
  max-height: 10px;
`;

const Title = styled.p`
  color: black;
  font-family: P-Semi;
  font-size: 11px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
`;


function Home() {


  return (
        <SearchBarContainer>
          <SearchInputContainer>
            <TitleContainer>
              <Title>Pick Fly Date</Title>
            </TitleContainer>
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
              <DatePicker />
            </MuiPickersUtilsProvider>
          </SearchInputContainer>
        </SearchBarContainer>
      </BackgroundImage>

  );
}

export default Home;

这是我从另一个文件导入的 DatePicker 组件：

import React, { Fragment, useState } from "react";
import { DatePicker, KeyboardDatePicker } from "@material-ui/pickers";

function InlineDatePickerDemo(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <DatePicker
      variant="inline"
      value={selectedDate}
      onChange={handleDateChange}
    />
  );
}

export default InlineDatePickerDemo;

知道我做错了什么吗？