Javascript 物料界面出现问题'；s移动键盘日期选择器'；s码

我在使用Material Ui的KeyboardDatePicker for ReactJs时遇到问题。在网络版上，它看起来不错，日期对话框的大小也不错，而在移动版上，它看起来太小了。
->显示问题的图像：
我的代码：

。。。一些进口商品
进口{
键盘日期选择器，
}来自“@material ui/pickers”；
进口{
选择移动
}来自“../redux/general/general.selector”
const标记='日期范围选择查询模式.component.tsx'
函数DateRangeSelectQueryModel（道具：DateRangeSelectQueryModelParams）{
常量类=useStyles（）
const{open，setOpen}=props
const theme=useTheme（）；
const fullScreen=useMediaQuery（theme.breakpoints.down（'sm'）；
//一些声明
返回(
{props.isMobile？''：props.title}
{
道具，伊斯莫比尔？
{props.title}
{props.content}
:
{props.content}
}
{
log（标记“：：onChange:：value:”，value）
handleDateChange（日期，“首字母”）
}}
className={props.isMobile？classes.keyBoardDatePickerMobile:undefined}
/>
handleDateChange（日期，'final'）}
键盘按钮按钮={{
“aria标签”：“更改日期”，
}}
/>
)
}
const mapStateToProps=createStructuredSelector({
isMobile:selectIsMobile
})
导出默认连接（MapStateTops）（日期范围SelectQueryModel）

---

我为此挣扎了一段时间。上面的代码显示了问题发生的位置。这是一个询问用户数据的对话框（textfield组件在手机上看起来太小，在网络上看起来很好）。如果用户单击textfield右侧的日历图标，则会出现DatePicker对话框。正如我前面所说，它在网络上看起来很好，对于移动设备来说太小了，我能做什么呢？

这是CSS的一系列小问题。那么，是什么重新设计了整个CSS页面，并且工作正常

... some imports
import {
  KeyboardDatePicker,
} from '@material-ui/pickers';
import {
  selectIsMobile
} from '../../redux/general/general.selector'
const TAG = 'date-range-select-query-modal.component.tsx'
function DateRangeSelectQueryModal(props:DateRangeSelectQueryModalParams) {
    const classes = useStyles()
    const {open,setOpen} = props
    const theme = useTheme();
    const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
    // some declarations  
    return (
        <Dialog
        
          fullScreen={fullScreen}
          open={open}
          onClose={handleClose}
          aria-labelledby="responsive-dialog-title"
        >
            <DialogTitle 
              id="responsive-dialog-title">{props.isMobile?'':props.title}</DialogTitle>
            <DialogContent>
              {
                props.isMobile?
                <Fragment>
                    <h1 className={classes.titleMobile}>{props.title}</h1>
                    <span className={classes.contentTextMobile}>{props.content}</span>
                </Fragment>:
                <Fragment>
                  <DialogContentText>
                    {props.content}
                  </DialogContentText>
                </Fragment>
              }
            <Grid container               
              direction="column"
              justify="space-around">
            <KeyboardDatePicker
                margin="normal"
                id="date-picker-dialog"
                label="Data inicial"
                format="DD/MM/YYYY"
                value={initialSelectedDate}
                onChange={(date,value)=>{
                  console.log(TAG,'::onChange::value:',value)
                  handleDateChange(date,'initial')
                }}
                className={props.isMobile?classes.keyBoardDatePickerMobile:undefined}
              />
              <KeyboardDatePicker
                margin="normal"
                id="date-picker-dialog"
                label="Data final"
                format="DD/MM/YYYY"
                value={finalSelectedDate}
                onChange={(date)=>handleDateChange(date,'final')}
                KeyboardButtonProps={{
                  'aria-label': 'change date',

                }}

              />
            </Grid>
          </DialogContent>
          <Divider/>
          <DialogActions>

          </DialogActions>
        </Dialog>
    )
}
const mapStateToProps = createStructuredSelector<any,any,any>({
  isMobile:selectIsMobile
})
export default connect(mapStateToProps)(DateRangeSelectQueryModal)