Material-UI v5 Datepicker语言 - 展开到其父元素的宽度

Question

在Material-UI v4中，fullWidth属性可以传递给Datepicker组件。然而，在v5中，这个属性没有在组件API中列出。该组件的所有css选择器都是不确定的，因此我无法使用width css属性。还有我错过的其他选择吗?

Answer 1

示例:https://codesandbox.io/s/material-ui-v5-forked-fvc3er?file=/src/App.js

对于Material-UI v5中的DatePicker和TimePicker组件，都需要设置renderInputprop。当使用TextField组件作为渲染组件时，您可以使用fullWidth道具来扩展到其父组件的宽度。

<DatePicker
inputFormat="MM/dd/yyyy"
value={date}
onChange={(value) => setDate(value)}
renderInput={(params) => <TextField {...params} fullWidth />}  <--- This right here
/>

Answer 2

解决方案:

<DatePicker
label="Date"
slotProps={{ textField: { fullWidth: true } }}
/>

Answer 3

对于我来说，fullWidth属性不起作用。我使用以下版本:"@mui/lab": "^5.0.0-alpha.61",和"@mui/material": "^5.2.3"。

我的解决方案是简单地交换fullWidth宽度的样式，如:

<DatePicker
inputFormat="MM/dd/yyyy"
value={date}
onChange={(value) => setDate(value)}
renderInput={(params) => <TextField {...params} sx={{width: '100%'}} />

Answer 4

假设这个线程的本意是为像我这样的开发者，他们只是想知道如何自定义材质UI的StaticDatePicker组件的大小，这是我对这个问题的解决方案。

在Material v5中，我们可以使用样式来定制任何我们喜欢的组件。我还选择自定义CalendarPicker而不是StaticDatePicker，因为这样更容易针对.MuiCalendarPicker-root类。

Answer 5

如果您正在使用FormControl，请尝试:

<FormControl
className={className}
variant="outlined"
size="medium"
required={required}
error={hasError}
disabled={disabled}
fullWidth={fullWidth}
>
<FormLabel htmlFor={name} style={{ marginBottom: 4 }}>
{label}
</FormLabel>
<DateTimePicker minutesStep={15} disabled={disabled} format="DD/MM/YYYY HH:mm a" />
{formHelperText && <FormHelperText>{formHelperText}</FormHelperText>}
</FormControl>

FormControl管理大多数状态:https://mui.com/material-ui/api/form-control/

Answer 6

一个快速/临时的解决方案，不使用样式材质UI

<DatePicker
sx={{ width: "100% " }}
className="MuiDayCalendar-header MuiDayCalendar-weekContainer" 
/>

在css文件中:

.MuiDayCalendar-header {
justify-content: space-around !important;
}
.MuiDayCalendar-weekContainer {
justify-content: space-around !important;
}

Answer 7

张贴答案供将来参考，因为上面的答案不适合我。

renderInput={(params) => <TextField {...params} sx={{ gridColumn: "span 4" }}/>

您可以根据需要改变span的值来增加或减少长度。