Material-UI 日期选择器的图标不可见

Question

我正在使用 Material-ui 作为 Datepicker 组件，import Grid from "@material-ui/core/Grid";日期选择器图标未显示。

请在此处找到codesandbox链接：https ://codesandbox.io/s/material-demo-7vzo5 。

Answer 1

问题是你导入了 2 个不同的组件，KeyboardDatePicker并且DatePicker

import {
  KeyboardDatePicker,
  DatePicker
} from "@material-ui/pickers";
...
<KeyboardDatePicker
          disableToolbar
          InputAdornmentProps={{ position: "start" }}
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            "aria-label": "change date"
          }}
        />
        <DatePicker
          keyboard
          InputAdornmentProps={{ position: "start" }}
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
        />

KeyboardDatePicker有图标。DatePicker没有图标。所以你需要更改DatePicker为KeyboardDatePicker

 <KeyboardDatePicker
          disableToolbar
          InputAdornmentProps={{ position: "start" }}
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            "aria-label": "change date"
          }}
        />
        <KeyboardDatePicker
          keyboard
          InputAdornmentProps={{ position: "start" }}
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
        />