Material-UI v5 Datepicker - 扩展到其父级的整个宽度

Question

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

Answer 1

该解决方案有效：

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

Answer 2

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

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

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