更改KeyboardDatePicker Material UI组件的样式

Question

我使用 Material UI 组件来创建 React Js 应用程序。

首先，我想改变宽度和高度首先，我想从 Material UI 组件更改KeyboardDatePicker

这是第一个条件：

这是开始和结束日期选择器的代码：

<div>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker 
            disableToolbar
            label="Start Date"
            variant="inline"
            inputVariant="outlined"
            format="dd/MM/yyyy"
            KeyboardButtonProps={{
                'aria-label': 'change date',
            }}
            keyboardIcon={<TodayIcon style={{color: colors.customCornFlowerBlue}}/>}
            value={startDate}
            onChange={changeStartDate}
        />
    </MuiPickersUtilsProvider>
</div>
<div>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker 
            disableToolbar
            label="End Date"
            variant="inline"
            inputVariant="outlined"
            format="dd/MM/yyyy"
            KeyboardButtonProps={{
                'aria-label': 'change date',
            }}
            keyboardIcon={<TodayIcon style={{color: colors.customCornFlowerBlue}}/>}
            value={endDate}
            onChange={changeEndDate}
        />
    </MuiPickersUtilsProvider>
</div>

然后我尝试通过向两个日期选择器添加 InputProps 和 style 属性来更改两个日期选择器的宽度和高度：

<div>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker 
            disableToolbar
            label="Start Date"
            variant="inline"
            inputVariant="outlined"
            format="dd/MM/yyyy"
            KeyboardButtonProps={{
                'aria-label': 'change date',
            }}
            keyboardIcon={<TodayIcon style={{color: colors.customCornFlowerBlue}}/>}
            value={startDate}
            onChange={changeStartDate}
            InputProps={{
                style: {
                    fontSize: 14,
                    height: 44
                }
            }}
            style={{
                width: 232
            }}
        />
    </MuiPickersUtilsProvider>
</div>
<div>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker 
            disableToolbar
            label="End Date"
            variant="inline"
            inputVariant="outlined"
            format="dd/MM/yyyy"
            KeyboardButtonProps={{
                'aria-label': 'change date',
            }}
            keyboardIcon={<TodayIcon style={{color: colors.customCornFlowerBlue}}/>}
            value={endDate}
            onChange={changeEndDate}
            InputProps={{
                style: {
                    fontSize: 14,
                    height: 44
                }
            }}
            style={{
                width: 232
            }}
        />
    </MuiPickersUtilsProvider>
</div>

结果如下：

我们可以看到标签/提示文本的位置没有垂直居中。

那么我怎样才能改变这个日期选择器的样式呢？

这些是我想要的属性：

1. 宽度：246 像素
2. 高度：44 像素
3. 标签/提示文本垂直居中

Answer 1

你可以使用 style prop 来做到这一点，像这样传递 props 值style={{width:"246px",height:"44px"}}

 <KeyboardDatePicker 
            disableToolbar
            label="Start Date"
            variant="inline"
            inputVariant="outlined"
            format="dd/MM/yyyy"
            KeyboardButtonProps={{
                'aria-label': 'change date',
            }}
            keyboardIcon={<TodayIcon style={{color: colors.customCornFlowerBlue}}/>}
            value={startDate}
            onChange={changeStartDate}
            InputProps={{
                style: {
                    fontSize: 14,
                    height: 44
                }
            }}
             style={{width:"246px",height:"44px"}}
        />