更改样式 KeyboardDatePicker Material UI 组件答案

【问题标题】：Change the style KeyboardDatePicker Material UI component更改样式 KeyboardDatePicker Material UI 组件
【发布时间】：2021-07-14 13:43:34
【问题描述】：

我使用 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 prop 添加到两个日期选择器来更改两个日期选择器的宽度和高度：

<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>

结果如下：

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

那么我该如何改变这个日期选择器的样式呢？

这些是我想要的属性：

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

【问题讨论】：

标签： reactjs datepicker material-ui

【解决方案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"}}
        />

【讨论】：

感谢您的回答。之前试过了，还是不行

【解决方案2】：

我刚刚遇到了同样的问题，最后用 div 包装了 MUI 元素并将样式应用于 div。不知道这是否是一个好的解决方案但有效。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。